float:left와 clear:left

 

 

clear:both로 하면 left건 right건 해제하겠다로 사용된다.

 

float을 해제하기 위한 방법

1. 형제요소에 clear : both

2. 부모요소에 overflow :hidden or auto

3. 부모요소에 clearfix 추천!

clearfix::after위치는 두번째 child 바로 아래 위치라고 생각하면 된다. (중요)

1번째와 마찬가지로 저 위치에서 clear:both를 하는거다.

이렇게 하면 좋은게 parent안에서 그 어떤 짓을 해도 항상 마지막에 clear:both가 들어가주니까 정리된다.

 

---

예제

<div class="wrap clearfix">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
<div class="bo2">5</div>

.clearfix::after {
  content:'';
  clear:both;
  display:block;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: gray;
  margin: 10px;
}
.bo2 {
  width:300px;
  height:300px;
  background:orange;
}