float
property を子 Element に適用すると親 Element が子 Element のheight
を感知することができない。なのでこれを克服する方法を知っておくべきである。
下記の例で説明を続ける。
⚠ float
を解除するとはfloat
の property を削除するのではなく、float
の影響から自由にすることを示す。
HTML
<div class="parent">
おや
<div class="child">こども</div>
</div>
CSS
.child {
float: left;
}
- 子 Element を含むサイズになる。
- 親 Element の親 Element にもずっと
float
を適用が必要となる。
.parent {
float: left;
}
-
overflow: auto
子 Element が比較的に大きいと Scroll が生じる。 -
overflow: hidden
子 Element が比較的に大きいと切られる。
.parent {
overflow: hidden;
}
❌ 意味ない Element となるためおすすめできない。
<div class="parent">
...
<div class="clearfix"></div>
</div>
.clearfix {
clear: both;
height: 0;
overflow: hidden;
}
- 若干の余白が生じる。
- 親 Element に
float
を適用したのと似たような結果。
.parent {
display: inline-block;
}
✅ おすすめ
.parent::after {
content: '';
display: block;
clear: both;
}