float:left 설정시 영역사라짐 방지하는 방법

float을 사용하면 영역이 없어지는데 이런 상황을 해결하는 방법은 여러가지가 있다.

 

방법1

똑같이 float를 사용한다. 영역이 사라진 영역에 float을 해주면 영역이 나타난다.

그러나 모든 영역에 float이 들어가 버리게 된다.

 

방법2

clear:both를 사용한다. 예전에는 이렇게 많이 썼는데 요즘에는 사이트가 점점 복잡해지면서 이건만으로는 해결하기 힘든경우가 많다.

 

방법3

부모요소에 display:inline-block를 사용한다. 하지만 이렇게 되면 성질이 바뀌게 된다.

 

방법4

부모요소에 overflow:hidden을 사용한다. 쉽게 사용할수 있지만 지정한 영역을 넘어설때는 사용하지 못한다.

 

방법5

부모 태그에clearfix라는 css를 만든다. css를 만들어줘야 하는 번거로움이 있다.

 

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}