floatで高さを認識させるとき
・floatを使った要素の親要素は、height:auto;(デフォルト) では高さが0になる。
解決方法
- 親要素にoverflow:hidden; または overflow:auto;を使う
- floatした要素の直後の要素にclear:both;をつける
- clearfixを使う
/* Clearfix---- */
.clearfix:after {
clear: both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */
----------------------------------------
仕事ではclearfixを使ったものをよく見るけど、classがバンバン増えていくと見づらいので、ものによってはスマートに見せたい時はoverflow:hidden;とかclear:both;でいいのかもしれない？
★参考元
