フロートでレイアウトを作ってみよう！

フロートでレイアウトしよう！

今回はフロートを使ってレイアウトをしてみましょう。

画像は{float:left}している。フロートは通常フローから外されてしまう。
その結果、通常フローである div 要素では、フロートした要素の高さを含まない …。
なので画像の高さを無視した配置になっている。
それを、どうするか

■ 1. overflow: hidden でフロート解除

.post{overflow : hidden;}をあてた。
ひとつめは、div 要素に overflow: hidden を指定する方法。
「通常フローである div 要素では、フロートした要素の高さを含まない」。のであるが、続きがある。
W3Cによると height の値が auto で overflow の値が visible 以外のブロックボックスが、
そのマージン下辺よりも下にくるようなフロートを子に持つ場合、その高さはフロートを含むように広げられる。...らしい。
ゆえに、overflow の値を visible 以外（scroll にするとスクロールバーが出てしまうので、hidden がいいかも）にしてしまえば、キチンとフロートした要素を包んでくれるようになる。
この場合には、div に指定した clear: both は不要。
※だが本来は、 overflow: hidden は、切り抜く（はみ出す部分を隠す）プロパティーである。

■ 2. clearfix でフロートを解除

フロートでレイアウトしよう！

今回はフロートを使ってレイアウトをしてみましょう。

clearfix には色々なコードがあるが、
基本的には :after 疑似要素と content プロパティーを使ってブロックボックスを作り、
そこに clear: both を指定するという手法です。
clearfix と検索すれば、たくさんコードが出てくるので詳細は調べる。

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* clearfix for ie7 */
.clearfix{
display: inline-block;
}
.clearfix {
display: block;
}

HTML上に「clear:left」「clear:both」のついた要素の無い空divを置く方法しか無い場合、
それも記述法としては禁止事項ではないが、あまり好ましくないので
それならば、スタイルシート側で擬似的にボックスを作ってしまえという、そんな手法。

参考 / contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用する。
contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみ。
擬似要素（pseudo-element）とは、直訳すれば｢偽りの要素｣となります。要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。 :before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。