float를 해제하자, clearfix

 

 

 

Float, 레이아웃 잡을때 마법의 요소다. 그런데 float를 사용하면 '없는 영역' 으로 간주하여 부모 요소의 height가 없어져버리는 경우가 있다..^^ 물론 부모 요소에 고정된 height값을 주면 바로 될 일 이지만 지금같은 반응형 시대에서 height에 고정값을 주는일은 뭐다?= 있을수 없는일... 고로 부모요소에 height를 주는 대신 float로 인한 레이아웃 오류를 잡을수 있는 clearfix를 하면 된다.

 

CSS

 

.clearfix{
 
   *zoom:1;  
 
}
 
.clearfix:after{
 
   content: '';
 
   display: block;
 
   clear: both;
 
}

 

먼저 .clearfix라는 클래스를 정의해주자. 그리고 나서 float하는 요소에 class="clearfix"를 주면 된다.

 

혹은,

 

 

.clear{clear:both;}

 

이렇게 .clear라는걸 정의해 준 후 float하는 요소의 뒤에 (즉, 같은 부모 요소 내의 형제 요소 위치에) 임의의 div를 만들어서 class="clear"를 줘도 된다.