Own products

  • 新規事業のアイディア創造機

Tutorial

2012
09/11

【CSS 中級講座】floatを解除するclearfixのビューティフルな実装法

この記事の読了時間:約512

  • このエントリーをはてなブックマークに追加

さて【CSS 中級講座】シリーズ第2弾は、CSSコーディングには必携の知識「clearfix」について。

なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。

そんな困った時に使われる「float状態を解除する方法」を通称して「clearfixクリアフィックス)」と呼ぶのですが、実はいろいろな方法があります。

有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります!

そんな訳で、さっそくいってみましょー!

clearfixのビューティフルな実装法

実装前の状態

まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。

<div id="contents">
	<div id="main">
		<p>ここは<br />左側の<br />コンテンツです</p>
	</div>
	<div id="sub">
		<p>こっちは<br />右側の<br />コンテンツです</p>
	</div>
</div>
<p id="text">僕はどうなってしまうのでしょーか。</p>

んで、こっちが No clearfix のCSSです。

#contents {
	width:250px;
	margin:0 auto;
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}

さて、このコーディングでレイアウトがどう崩れるか、下記URLをご査収くださいな☆

clearfix実装法その1 overflow:hidden 実装前の状態

あぁっ、真ん中に入ってるぅぅ!すっごく入ってるぅぅぅ!!!

実装法その1 overflow:hidden

この状態を、たった1行で正しい表示に修復する方法があるんです!

それは「floatした要素の”親要素”に overflow:hidden を追加する」って方法!

具体的には下記のようにします。

#contents {
	width:250px;
	margin:0 auto;
	overflow:hidden; // コレ追加
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}

HTMLは一切変えてないので省略しますが、このたった1行を追加したサンプルが下記。

clearfix実装法その1 overflow:hidden 実装後

ね?ちゃんと想定通りのレイアウトになるっしょ?

実装法その2 clear:both

上記の overflow:hidden は使い勝手がとても良いのですが、マークアップによっては使えないケースも。

例えば下記のようなマークアップの場合、いくら親要素に overflow:hidden を追加しても float した要素の直後にあるモノには効かず、結果的に悲しい表示になります。

<div id="contents">
	<div id="main">
		<p>ここは<br />左側の<br />コンテンツです</p>
	</div>
	<div id="sub">
		<p>こっちは<br />右側の<br />コンテンツです</p>
	</div>
	<p id="text">僕はどうなってしまうのでしょーか。</p>
</div>

このマークアップで「clearfix実装法その1 overflow:hidden 実装後」と同じCSSのまんまだと、こんな感じ。

clearfix実装法その2 clear:both 実装前の状態

「こんな時、どういうコトしたらいいのか、分からないの。。。」

「”clear:both”でよかろーもん(´・ω・`)」

#contents {
	width:250px;
	margin:0 auto;
	overflow:hidden;
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}
#text {
	clear:both;
}

float した要素の次に来るモノに clear:both を追加すればOK!

HTMLは変えぬまま clear:both を追加したサンプルページは下記。

clearfix実装法その2 clear:both 実装後

こんな感じで「実装法その1」「実装法その2」を使い分ければ、:after擬似要素なんざ一切使わなくても、しっかりとしたCSSレイアウトが構築できます!

明日は「CSS3のプレフィックスは今」を検証しちゃいます。

にしても3日連続投稿なんて久しぶりw

  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

お名前※必須

ご連絡先メールアドレス

お問い合わせ内容※必須

CAPTCHA

captcha

Blog parts

Affiliate