CSS : float 프로퍼티

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태그가 위아래로 확실히 분리되어 나타난다.