floatを解除するclearfixの書き方

親ボックス内で子ボックスをフロートする場合、「親ボックスの背景画像が表示されない」、「親ボックスのマージンがなくなる」、「親ボックスから子ボックスがはみ出す」等の解決方法に。

HTML

 
<div class="clearfix">
  <div>ボックスL</div>
  <div>ボックスR</div>
</div>
 

CSSの書き方 その1

 
/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/**/
 

少し短くなった書き方もあります。次をご覧ください。

CSSの書き方 その2

 
div{
    zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    line-height:0; 
    visibility:hidden;
}
 

もっと簡単にフロートを解除する方法はこちら→【簡単にできる最新のブラウザに対応したフロート解除方法】をご覧ください。