Ownedmedia ウェブ制作に役立つコンテンツを発信中!

コーディング 2015.05.22

floatレイアウトに必須の「clearfix」について

Tags: ,,
最終更新日:Update

一般的なウェブサイトのレイアウトは、CSSを使ったマルチカラムが基本となりますが、コンテンツを配置していく際にはCSSのfloatプロパティが必須となります。このfloatプロパティはコンテンツを浮動化することで左右回り込ませ並べて配置できるようになります。ただし、浮動化させたコンテンツの後に続く要素も同じく浮動化されるので、浮動化のクリアが必要になったり、思わぬところでレイアウトが崩れてしまう原因にもなります。

 

そこで登場したのが、この「clearfix」という手法です。歴史も古く知名度も高いのでコーディングを経験しているとお馴染みのテクニックですが、今回はclearfixについて詳しく説明していきたいと思います。まずは、コンテンツをfloatさせるところから説明を進めていきます。

 

コンテンツを浮動化させて左右に回り込ませるfloatプロパティ

floatプロパティを使うことで、コンテンツは親要素から浮いた状態になり、後に続く要素が左、もしくは右に回りこむように配置することが可能になります。一般的なウェブサイトでよくみかけるマルチカラムのレイアウトはこのfloatプロパティを使って配置されていることが多いようです。

 

floatプロパティを使用するとレイアウトが崩れる?

レイアウトを作っていく上でとても便利なfloatプロパティですが、注意点もいくつかあります。

 

  • ・コンテンツの後に続く要素がすべて左右に回りこんで配置されるため、目的の場所で解除する必要がある
  • ・親要素から浮いた状態になるので、親要素へのコンテンツの高さが認識されない

 

実際のレイアウトを図にすると下記のようになります。

floatレイアウトに必須の「clearfix」について
※浮動化することにより親要素が子要素の高さを認識しない

そこで、この問題を解決するために登場したのがclearfixというテクニックです。

 

コンテンツにclearfixを適用させる

では実際にclearfixを使ってみましょう。まずは下記のCSSを追加します。そして、floatを内包する親要素にclearfixのクラスをつけます。そうすると下記のように回り込みの解除と親要素の高さが反映されるようになります。

// HTML
<div id="parent" class="clearfix">
 <div class="child"></div>
 <div class="child"></div>
</div>


// CSS
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 display: inline-table;
 min-height: 1%;
}
* html .clearfix {
 height: 1px;
 /*¥*//*/
 height: auto;
 overflow: hidden;
 /**/
}

floatレイアウトに必須の「clearfix」について
※子要素の回り込みが解除され親要素の高さが反映される

 

clearfixのCSSを詳しく見る

clearfixのCSSを詳しく見てみます。ブラウザ環境の移り変わりと共にいろいろな形に変化していますが、近年の一般的な形は下記のようになります。

// モダンブラウザ
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

// IE7
.clearfix {
 display: inline-table;
 min-height: 1%;
}

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

 

after擬似要素を使い、親要素の後に続く高さの無い空の擬似要素を生成します。そして同時にfloatを解除させます。こうすることでレイアウト崩れの問題をクリアにしています。

またafter擬似要素はIE8からの対応になるのでIE7に対してはinline-tableとmin-heightで対応します。さらにIE6ではinline-tableとmin-heightも使えないのでheightで対応します。

 

ウェブサイトのコーディングではメジャーなfloatプロパティを使ったレイアウトですが、必ずセットで登場するのがclearfixのテクニックです。CSSの進化でdisplayプロパティのtable-cellやFlexboxなども徐々に浸透してきていますが、まだまだ欠かすことができないかと思います。正しく使用してコーディングの効率化に役立ててください。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?