親の背景が伸びない、高さがでない、あのもどかしい悩みをclearfixが解決します。
clearfixという手法は、擬似要素の:afterとIEの仕様やバグを利用したものです。擬似要素の:afterはcontentプロパティと一緒に使うことで、ボックス内の末尾に、新たなインラインのボックスを生成します。:afterによって生成されたボックスに、display: block;とclearプロパティを設定することで解決されます。
clearfixについての詳細 :
floatを解除する手法のclearfix と 次世代のレイアウトの話
1 2 3 4 5 6 7 |
/*clearfix*/ .clearfix:after { content: ""; clear: both; display: block; } |
コメントを残す