float은 이미지 주위를 텍스트로 감싸기위해 만들어졌다.
clear는 float의 동작방식을 제어하는데 중요한 역할을한다.
-html-
<div class="box">...</div>
<section>...</section>
-css-
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
이 경우 html에서는 div밑에 section이 아래에 있는 순서이지만,
div에 float:left가 주어졌기때문에 section위의 왼쪽에 떠서 겹쳐진채로 나타나게된다.
이렇게 겹치지않고 HTML순서처럼 div태그가 위에, section태그가 아래에 나타나게 하기위해서는 section에 clear속성을 부여해야한다.
-html-
<div class="box">...</div>
<section class="after-box">...</section>
-css-
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
이렇게 section에 clear:left 속성을 부여하면 div태그와 section태그가 위아래로 확실히 분리되어 나타난다.