[CSS] clearfixを使ったDIVの段組みテクニック

DIVタグを使った段組ではCSSでカラムの回り込みを設定します。

この際に以下2カラム構成の場合、以下のようなHTMLを書いた場合

HTMLソースコード

以下のような表示になり、赤い枠で囲っている領域から「子DIVタグ：カラム1」「子DIVタグ：カラム2」がはみ出している状態になります。

ブラウザでの表示

※赤い枠線内に青い枠線のDIVを入れたいが、はみだしてしまっている。

このような書き方ですと、親DIVが高さを定義できず、子DIVがあふれてしまうという状態になります。

これは親DIV内の全ての子DIVタグがfloatのスタイル属性を持っており、CSSの仕様上なのですが親DIVが子DIVの高さを考慮した計算行わないために起こっている現象です。

子DIVにheightのスタイル属性を持たせることで、親DIVが考慮することもできるのですが、高さは動的に変わるケースも非常に多いため、毎回高さを計算することは現実的に難しいと思われます。

以上を踏まえて、実現したいことは以下になります。

floatのスタイル属性をもっている子DIVの高さを考慮して、親DIVの高さを動的に確保したい。

これを実現するために「clearfix」といわれる、CSSハックを使用します。

CSSハック

「CSSハック」とはInternetExplorer（IE）、FireFox、Safariなどブラウザによって実装されているレンダリングエンジンの違いや、ブラウザのバグを逆手にとって、それらの違いを利用した形でCSSを適用させるテクニックです。

clearfixはCSSハックの中でも代表的な手法で、多くのサイトで利用されているテクニックです。

書き方も色々あるのですが、弊社では以下の形を取っています。（最も一般的な形だと思います）

この記述をCSS内でクラスとして定義し、DIVの構成ではみ出してしまう親の要素に適用させます。

DIVによる2カラム構成にclearfixを適用

では、上記で定義したクラス「clearfix」を適用させます。

具体的には1行目のDIVタグに「class="clearfix"」を入れるだけです。

clearfixの記述を加えると、今まではみ出していた青い枠の2つの子DIVが親DIVに内包されるようになり、
これにより、DIVの中でDIVの段組を行った場合、親DIVからはみ出すということを防ぐことができるようになります。

普通のCSSデータですのでもちろん、外部からの読み込みで対応することもできます。

ブラウザでの表示状態

青い枠のDIVが赤い枠の親DIVに内包されています。

いかがでしょうか。
非常に簡単な方法ですのでぜひお試し下さい。