clearfix

clearfix?

• 특정 요소에 float: left를 쓰게 되면 해당 부분 구조가 깨지게 된다. 구조가 깨지는 것을 방지하기 위해 쓰는 방법 중 하나가 clearfix이다.

• 나는 상위 박스에 보통

  overflow: hidden;

  을 많이 써서 구조 깨짐을 방지하였었다.
  

• 분명 overflow: hidden;을 사용할 수 없는 상황이 나오게 된다. 그럴 때 쓰면 좋은 방법이 clearfix를 사용하는 것이다.

• clearfix라는 방법은 간편하게 css 파일에 밑의 코드를 저장하면 된다. html 코딩 시 구조가 깨지는 상황이 오면 클래스명에 clearfix를 추가해준다.

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