@blog.justoneplanet.info

さてCSS初心者ならば一度は経験するこの現象。。。
floatさせた内側のボックスが外側のボックスからはみ出してしまうというものだ。仕様的にははみ出すのが正しい。この仕様が便利かは微妙だが・・・

■こう表示したい（チャント親ボックスに含まれている）

■失敗例（親ボックスが潰れ、子ボックスがはみ出す：背景も適用されない）

■解決策（HTMLソース）

<div class="clearfix" style="border: 1px solid black; padding: 1px">
<div style="border: 1px solid black; margin: 0pt; float: left; background-color: red; width: 45%">left</div>
<div style="border: 1px solid black; margin: 0pt; float: right; background-color: blue; width: 45%">right</div>
</div>

■CSSソース

.clearfix:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .clearfix{
    height:1%;
}
.clearfix{
    display:block;
}
/*End hide from IE-mac*/

■解説

• HTMLソースにはクラスにclearfixを付け足す
• CSSソースの.clearfix:afterで見えない要素を.clearfix後に付け足しボックスを拡張する（ただしIEはこの記述を適用できない）
• IE7用にdisplay:inline-blockを付け足す
• IE6以前用にdisplay:block;を付け足す
• もっとも一般的なCSSハックである！？

ちなみに上記\（バックスラッシュ）は半角の￥マークのことです。

■注意点

clearfix（クリアーフィックス）とはハックのテクニック名なので本来は、例えば親BOXに（class=”setsumeibun”）としたらCSSのセレクタのclearfix部分をsetsumeibunで置換してあげるのがよい。何故ならばHTMLは文章の意味をマークアップする言語でありデザイン上のclearfixというものを挿入するのは多少矛盾する。したがって、もし仮に同じハックが必要な要素があるなら、CSSのセレクタに追記してあげるやり方の方が教科書に書けるような正しい記述といえるかもしれない。

■こんな感じ

.setsumeibun:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.setsumeibun{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .setsumeibun{
    height:1%;
}
.setsumeibun{
    display:block;
}
/*End hide from IE-mac*/