WEB制作(html・css(スタイルシート))に関する各種メモ書き

構造のマークアップなしでフロートをクリアする方法「clearfix」

今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。

● HTMLに記述

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム1</div>
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム2</div>
</div>

● clearfix(今のやり方 Windows IE6 , IE7 に対応する必要が無い場合)

.clearfix:after {content:''; display:table; clear:both;}

clearfix(昔のやり方。参考までに。)

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

関連エントリー

No.288
12/15 14:30

edit

css