CSS의 float 속성을 이용하면 웹 페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있습니다.
float는 우리말로 하면 '(물 위나 공중에서)떠가다, 뜨다, 부유하다' 등의 뜻을 가집니다.
float 속성을 이용한 레이아웃 방식은 직관적이고 사용법이 간단하기 때문에 요소를 원하는 곳에 쉽게 배치할 수 있습니다.
하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서 float 속성의 영향을 받게 됩니
다. float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고
자 할 때에는 clear 속성을 사용합니다.
float 속성이 적용된 이미지 다음에 clear 속성을 사용하지 않으면 다음 예에서와 같이 그 다음에 오는
요소가 이미지와 중첩되어 화면에 배치됩니다.
float 속성의 중첩 현상
ex5-3.html
<style> div { float: left;
margin: 10px;
} p { background-color: yellow; } </style> <body> <div><img src="img/choco2.jpg"></div> <div><img src="img/choco3.jpg"></div> <p>초콜릿은 약 2,600년 전에 처음으로 개발되었다. 마야 문명이 코코아를
갈아서 음료로 마시는 것은 처음이었다고 알려져 있다.</p> </body>
ex5-3.html의 실행 결과
위의 예에서와 같은 현상을 피하고 새로운 줄에서 요소를 시작하게 하려면 다음 예에서와 같이 clear 속성을 사용하여야 합니다.
clear 속성 사용 예
ex5-4.html
<style> div { float: left;
margin: 10px;
} p { clear: left;
background-color: yellow;
} </style> <body> <div><img src="img/choco2.jpg"></div> <div><img src="img/choco3.jpg"></div> <p>초콜릿은 약 2,600년 전에 처음으로 개발되었다. 마야 문명이 코코아를
갈아서 음료로 마시는 것은 처음이었다고 알려져 있다.</p> </body>
ex5-4.html의 실행 결과
다음 예에서는 clear 속성을 클래스로 별도로 정의한 다음 필요할 때 사용하고 있습니다.
clear 속성의 클래스 정의
ex5-5.html
<style> .a { float: left; } .b { float: right; } .clear { clear: both; } p { background-color: skyblue; } </style> <body> <div class="a"><img src="img/choco2.jpg"></div> <div class="b"><img src="img/choco3.jpg"></div> <div class="clear"></div> <p>초콜릿은 약 2,600년 전에 처음으로 개발되었다. 마야 문명이 코코아를
갈아서 음료로 마시는 것은 처음이었다고 알려져 있다.</p> <div class="a"><img src="img/choco4.jpg"></div> <div class="b"><img src="img/choco5.jpg"></div> <div class="clear"></div> <p>초콜릿은 약 2,600년 전에 처음으로 개발되었다. 마야 문명이 코코아를
갈아서 음료로 마시는 것은 처음이었다고 알려져 있다.</p> </body>
