floatさせた要素を、その親要素で解除する、いわゆる、クリアフィックスというテクニックの解説。
floatさせた要素を、その親要素で解除する方法があります。いわゆる、クリアフィックスというテクニックです。
構造のマークアップなしでフロートをクリアする方法
このテクニックで、ずっと悩まされてきた問題を解決できました。ので、悩まされてきた内容を書いて、心に焼き付けておきます。
問題のHTMLコード
そもそも、floatを利用して回り込みを行う際、どうやって解除するか非常に悩む場面があります。僕が昔からずっと悩んでたのが、以下のコード。
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
ようするに、<li>タグにfloatをつけて<ul>内で横並びのナビゲーションを作るときなんだけれど、回り込みさせた<li>を、どのポイントで解除すればいいの？というやりきれない思いで胸がいっぱいでした。
問題の悩み
通常、floatによる回り込みの解除は、回り込ませた要素を包括する親要素内で、かつ回りこませた要素の直後にブロック要素を配置して解除します。floatは、適切な位置で解除しないと、様々な状況下で不測の事態を呼び起こします。上記ソースで悩んだ問題は、<ul>タグ内で回り込みを解除したいのに、次のブロック要素が</ul>の後にならないと出てこないことでした。
floatを解除するために使えるブロック要素がないため、</ul>タグの手前で回り込みを解除するには、文章構造とは関係の無い<li>を、</ul>の手前に解除用として余分にひとつ追加して、その要素のスタイルで回り込みを解除します。<ul>タグ内の直下には<li>以外のタグを置いてはけないという決まりがあるため、他のタグは使えません。
しかも、横並びのナビゲーションを作る場合、<ul>内の<li>要素に共通で設定するスタイルがあるでしょうから、回り込み解除用の空リストには、それらの設定をクリアする上書きが必要かもしれません。回り込み解除用の<li>のためのclassもしくはidも必要になります。
では、floatを使わない横並びのナビゲーションは、どうでしょう？<li>をインライン要素にして横に並べます。並べるものが単純に画像であればアリですが、css spriteなどのテクニックを使う際など、縦・横を数値で指定したい場合には、インライン要素ではうまくありません。
clearfixであっさり解決
そんなとき、見つけたのがこの書き方。
<ul id="main-navi">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
#main-navi:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
#main-navi {
display: inline-block;
}
#main-navi {
display: block;
}
これは、回り込みさせる要素を囲ってある親要素（この場合は<li>を囲っている<ul>）に対して、回り込みを解除用のCSSを設定するという手法です。親要素で解除できるというのがナイス発想です。これなら、liタグの回り込みをulで解除できます。
ちなみに、clearfixのコードは、かなりの種類があり、モダンブラウザ以外にも対応してたり、してなかったりですが、上記のコードは、macのieなどの古いブラウザを、切り捨てています。
