NoiRのR

NoiRのR » web » css » floatのクリアについて

floatのクリアについて

Webサイトを制作するにあたり、割と初歩的な話ではあるのだけど、知らないとハマってしまう話としてfloatのクリアがあると思います。
cssでfloatを指定して右や左に寄せた要素がある場合、その親要素が寄せた要素の高さを認識してくれなくなってしまい、結果レイアウトが崩れるという経験は、初心者の頃誰でも一度は経験しているのではないでしょうか?

自分もWebデザイナーとして仕事をし初めの頃ハマって、かといって教えてくれる人も居なかったのでググリまくって”clearfix”というモノの存在を知りました。その後はこの”clearfix”を当たり前の様に使っているのですが”clearfix”にも色々と意見があって、使いながら何だかモヤモヤした気持ちになったりしているのです。

そもそも、floatを適用された要素は文字通り”float”していて親要素より手前に「浮いて」いる状態なのだそうで、親要素はその「浮いた」要素の部分には「何も無い」と認識してしまう様です。で、”clear fix”を親要素に適用して、この”float”を解除する訳ですが、自分が普段使用しているclear fixはこんな感じ。

.clearfix:after {
	conetnt: ".";
	display: block;
	clear: both;
	height: 0;
	font-size: 0;
	visibility: hidden;
}

※上記はモダンブラウザのみ対応しています。IE6, 7など古めのブラウザにはそれぞれ別の記述が必要です。

親要素の末尾にピリオドを追加して高さ0の不可視のブロック要素にしてclearを適用している訳ですね。floatが適用された要素の下にfloatをクリアする要素が追加されている訳だから、ちゃんと親要素がfloatが適用された要素の高さを認識して意図した通りのレイアウトになってくれます。

しかし、間接的とはいえ必要の無い要素をfloatをクリアするだけに追加するってのも何だか気持ちの悪い話だし、高さをブラウザいっぱいにした際にボトムにマージンが出来てしまう不具合がある様子。また、自分は”clearfix”というクラスを作って、適用したい要素にそのセレクタを記述しているのだけど、それも本来html文書に構造を、cssにレイアウトを記述するという概念には沿っていない様な。かといって、いちいちclearfixを適用したい要素が登場する度にそのセレクタをcss側に記述してってのも何だかなぁと思ってしまう訳です。(とか言いつつ使いまくってますが……)

clearfixについて、以下の記事で色々と細かく検証されています。随分前の記事ですが……。
スタイルシートをめぐる冒険: clearfixの決定版を作る -モダンブラウザ編-

clearfixを知って(勿論初心者の頃ですけど)暫くして、こんな記事に出会いました。
clearfixを使わないでやるには。 – CSS HappyLife

別に新しい技って訳でもなく、昔から使われていたやり方の様ですが、親要素に”overflow: auto(若しくはhidden)”を適用する事で、floatを適用した要素の高さを認識させる方法があるとの事。

で、最近色々とブログを眺めていたらたまたま、overflowでfloatを解除する方法に就いて纏めてある海外ブログの記事があったのでご紹介。
CSS: Clearing Floats with Overflow – WebDesignerWall

ここではoverflowを使ってfloatを解除し、floatを適用した要素の高さを親要素に認識させる方法と、floatで左寄せにした画像の右側に流し込んだテキストが長くて、画像下に回り込んでしまうのをoverflowを使って回り込まない様にする方法が解説されています。

またoverflow: autoを適用する事で、中の要素のサイズが大きいと親要素にスライドバーが出てしまうというトラブルを解決する方法に就いてもデモを使って解説されています。

正直、自分はこのoverflowを使う方法は理屈が判っていません。理屈が判る人が居たら教えてください(苦笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバックURL: http://studio-noir.jp/2011/02/143.html/trackback