clearfix の指定方法 ( CSS )

Web サイトのレイアウトをする際に CSS で float する場面は頻繁にあると思うが、このときに面倒なのが、float した要素の高さが 0 になってしまうということである。

この問題を解決するための方法として、clearfixというハックがある。

これは、高さを指定したい要素の後に無理矢理コンテンツを突っ込んで、そのコンテンツを非表示にする事で高さ指定させる方法である。

以下に clearfix の記述方法を説明する。

基本的な 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;
  /**/
}

関連記事

HTML5、CSSを用いた中央寄せのテンプレート
CSSのコメントの書き方
button要素のデザインを変更する方法(HTML、CSS)

コメント

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/2228/trackback/