Clearing float boxes

박스를 flaot 시켰을 때 부모 박스가 제대로 감싸주지 못하는 것을 해결하기 위해 플로우팅을 클리어 시켜준다.

여러가지 방법이 있지만 요즘은 보통 이 방법으로 해결.

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
 
.clearfix::after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

읽을 거리

CSS Clearfix http://www.adamkaplan.me/css-clearfix/

과거의(?) 클리어링

Clearing Floats: An Overview of Different clearfix Methods (April 24, 2014)
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}

/* if you don’t need to support anything below IE8, you could get by with just the following: */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  min-height: contain-floats;
}

A new micro clearfix hack (April 21, 2011)
http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */