【CSS】 子要素にfloatをつけたとき親要素の高さが検出されない問題の解消・clearfixのテンプレート

divisionを分けて、子要素にfloat: right/leftをつけたとき、

親要素の高さが検出されない、という問題は、だれもが一度はぶち当たるのではないでしょうか。

これは、親要素の中に、中身のないコンテンツを入れてやることで領域を表示してくれるようになります。

そのときの、clearfixテンプレートを備忘のため貼っておきます。

---CSSに以下を記述------------------------------------------

.clearfix:after {    /*beforeだと、前につけることができる*/     

content: ''; 　　　　　/*空文字*/   

display: block;     

clear: both;     

height: 0; 　　　　　/*高さも必要なし*/

}

---------------------------------------------

繰り返しになりますが、

子要素にfloatをつけた場合に。親要素の高さが検出されない問題について、 floatをつけた要素の、「親要素」に、class="clearfix"つけて、上記をCSSに記載することで解消されます。