clearfix の指定方法 ( CSS )

基本的な clearfix の指定方法

まずは HTML のfloat を指定している要素に clearfix クラスを設定。既に別のクラス名がついている場合には、半角スペース区切りで複数のクラス名をつけられるので、以下のコードを参考にクラス名を追加する。

基本的な clearfix の指定方法 – HTML

<div class="clearfix">float で高さが 0 になる div に clearfix クラスをつける</div>
<div class="kurasumei clearfix">既にクラス名がついていた場合</div>

次に、CSS 側の指定。clearfix クラスの直後 ( :after ) に新しいコンテンツを追加し、それを非表示にしている。

基本的な clearfix の指定方法 – CSS

.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}

以上でモダンブラウザは対応できるはず。IE の場合には、追加記述が必要。以下に記述する。

clearfix の IE 対応版

IE に対応するために、追加記述したものが以下のコード。HTML 部分は同様なので、省略する。

clearfix の記述方法 ( IE 対応版 ) – CSS

.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}