float解除

clearfixメモ

.clearfix:after{
  content: "";
  clear: both;
  display: block;
}

■親にoverflowで子の高さを認識させる方法
※visible以外で有効。スクロールしないようにhiddenを指定する。

#wrap{
  overflow: hidden;
  zoom: 1;
}
.right{
    float: right;
}
.left{
    float: left;
}

clearfixの変遷

“clearfix” for modern browsers

The very latest new new way to do "clearfix" (07-01-2012)より
IE7以下や古いオペラを見捨てて、モダンブラウザ用

.btcf:after {
    content:"";
    display:table;
    clear:both;
}

micro clearfix

A new micro clearfix hack (APRIL 21, 2011)より

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

IE6.7 ターゲットならこちらを使ってね。

cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Original Clearfix

昔っからのclearfix

Contained Floats, the clearfix technique; (8-May-2004)より

.floatcontainer:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */