floatさせる際、親要素に高さが指定してあると後続の要素に回り込みが起きないのはなぜ？

Question

floatを使用する際、親要素に対してclearfix等しないと
後続の要素が回り込みすると思います。

しかしfloatさせる親要素に対して高さが指定してあると
後続の要素が回り込みしないことに気付きました。

なぜ、親要素に高さが指定してあると回り込みが発生しないのでしょうか。
下記の場合、heightを削除するとやはり回り込みが発生しました。

宜しくおねがいします。

https://codepen.io/yumeyamada/pen/PoNrLGM

Answer 1

floatを設定した要素は通常フローから外れて浮いた状態になります。
そのため親要素の高さは指定していないと0になります。そのため、次の要素が上に上がってきます。
floatの要素があるとその隣に上がります。
高さが指定してあれば上に移動することがないので回り込みもしません。

親要素にheightを指定してfloatを解除する方法は昔から知られています。

floatを解除する4つの方法（clear:both;、overflow:hidden;、clearfix、height）

それぞれメリット、デメリットがあります。
最近は下記の方法も使えます。こちらはデメリットは少ないです。

display: flow-root で clearfix とおさらば - nlog

ただ、横並びするのにfloatを使うのはすでに古いです。現在なら、FlexBoxを使うのがお勧めです。こちらの方がレイアウトの自由度か高く、デメリットもほとんどないです。

Comments

[退会済みユーザー]

高さを指定してfloatを解除する方法があるんですね。
参考になりました。
FlexBoxでも組んでみようと思います。
ご回答ありがとうございました！