0%

Designデザインワークショップ

Posted:2015.05.22

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

一般的なウェブサイトのレイアウトは、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なども徐々に浸透してきていますが、まだまだ欠かすことができないかと思います。正しく使用してコーディングの効率化に役立ててください。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】