float-clear.md

float を解除する方法

float property を子 Element に適用すると親 Element が子 Element のheightを感知することができない。なのでこれを克服する方法を知っておくべきである。 下記の例で説明を続ける。

⚠ floatを解除するとはfloatの property を削除するのではなく、floatの影響から自由にすることを示す。

HTML

<div class="parent">
    おや
    <div class="child">こども</div>
</div>

CSS

.child {
    float: left;
}

親 Element にも float を適用

• 子 Element を含むサイズになる。
• 親 Element の親 Element にもずっとfloat を適用が必要となる。

.parent {
    float: left;
}

親 Element にoverflow property 適用

• overflow: auto 子 Element が比較的に大きいと Scroll が生じる。

• overflow: hidden 子 Element が比較的に大きいと切られる。

.parent {
    overflow: hidden;
}

親 Element の最後に Empty Element を作成し、clear property を適用

❌ 意味ない Element となるためおすすめできない。

<div class="parent">
    ...
    <div class="clearfix"></div>
</div>

.clearfix {
    clear: both;
    height: 0;
    overflow: hidden;
}

親 Element に display: inline-block property 適用

• 若干の余白が生じる。
• 親 Element に float を適用したのと似たような結果。

.parent {
    display: inline-block;
}

pseudo-element として clear property 適用

✅ おすすめ

.parent::after {
    content: '';
    display: block;
    clear: both;
}