floatレイアウトに必須の「clearfix」について
最終更新日: Update!!
一般的なウェブサイトのレイアウトは、CSSを使ったマルチカラムが基本となりますが、コンテンツを配置していく際にはCSSのfloatプロパティが必須となります。このfloatプロパティはコンテンツを浮動化することで左右回り込ませ並べて配置できるようになります。ただし、浮動化させたコンテンツの後に続く要素も同じく浮動化されるので、浮動化のクリアが必要になったり、思わぬところでレイアウトが崩れてしまう原因にもなります。
そこで登場したのが、この「clearfix」という手法です。歴史も古く知名度も高いのでコーディングを経験しているとお馴染みのテクニックですが、今回はclearfixについて詳しく説明していきたいと思います。まずは、コンテンツをfloatさせるところから説明を進めていきます。
※浮動化することにより親要素が子要素の高さを認識しない
そこで、この問題を解決するために登場したのがclearfixというテクニックです。
※子要素の回り込みが解除され親要素の高さが反映される
コンテンツを浮動化させて左右に回り込ませるfloatプロパティ
floatプロパティを使うことで、コンテンツは親要素から浮いた状態になり、後に続く要素が左、もしくは右に回りこむように配置することが可能になります。一般的なウェブサイトでよくみかけるマルチカラムのレイアウトはこのfloatプロパティを使って配置されていることが多いようです。floatプロパティを使用するとレイアウトが崩れる?
レイアウトを作っていく上でとても便利なfloatプロパティですが、注意点もいくつかあります。- ・コンテンツの後に続く要素がすべて左右に回りこんで配置されるため、目的の場所で解除する必要がある
- ・親要素から浮いた状態になるので、親要素へのコンテンツの高さが認識されない

コンテンツに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; /**/ }

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なども徐々に浸透してきていますが、まだまだ欠かすことができないかと思います。正しく使用してコーディングの効率化に役立ててください。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories