floatによるレイアウト崩れをclearfixで解決する

float プロパティで要素を横並びにしたレイアウトの際、
・後ろに続く要素が意図せず回り込む。
・背景色が適用されなくなる。

これらの問題を解決するため、clearfix という定番の方法を記します。

見本となるレイアウトですが、ヘッダー内でロゴ(今回はサイト名)とナビゲーションメニューをfloatプロパティを使って横並びにしたパターンで解説します。

HTML

CSS

　

このようにナビゲーションメニューにfloatを使用すると後続の説明文の段落（本格タイ料理〜）が回り込んでしまい、”background-color”で指定した背景色も適応されていません。

floatを指定した子要素が浮いて(float)しまい親要素の高さが無くなってしまっていることが原因です。

親要素に高さを持たせるために  cleafix セレクタを作成する。

　
①擬似要素「:after」を用い、contentプロパティ要素を 空の値とする事でこのセレクタを指定した要素の末尾に空のボックスが作られる。
②display:blockとし、擬似要素で作られたボックスをブロックレベル要素にする。
③clear プロパティを使用してfloatを解除する。
（clearプロパティはブロック要素として扱う事で有効となる）

floatを指定している要素の親要素にあたるnavタグに作成したcleafixセレクタを指定する。
　

　

後続の段落の回り込みを防いで、ナビゲーションに背景色も適応されるようになりました。