cssのoverflowプロパティについて

Question

cssのoverflowプロパティについて質問です。
次のサイトにてcssのoverflowプロパティのhiddenを使用すると子供の要素の高さを親が認識するというふうに書かれています。
さらに親要素を表示しながら「float:left;」でcssでセレクトすると子要素は順番に左から右に順にならんでいくということなのですが

https://www.itra.co.jp/webmedia/float-property.html

そもそも「一般には要素内の内容が多く、親要素に収まりきらない場合の、要素内の内容の表示方法を指定するプロパティです。overflowプロパティには、はみ出した内容を、親要素の下に表示する「visible」や、親要素からはみ出した内容は表示しないとする「hidden」などの値があります。」とあり、親要素からはみ出した部分は表示しないhiddenという値が子要素の高さを認識して
親要素の中で子要素を右から左に並べることができるのでしょうか？

以上です、よろしくお願いいたします。

Comments

[退会済みユーザー]

質問は何でしょうか？
・仕様が分からない
・ブラウザの挙動が認識している仕様と違う
・参考にしたサイトの説明が正しいか？

適当なコードで検証し、その結果と共に質問を整理すると回答を得やすいと思います。

Answer 1

ブロック整形コンテキストによるものです。

---

MDNによりますと、

浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。

ブロック整形コンテキスト - 開発者ガイド | MDN

となっており、この「浮動」とはフロートのことです。
つまり、ブロック整形コンテキストを生成することによってフロートの影響をその内部に閉じ込めることができます。

ブロック整形コンテキストを生成するには色々な手段がありますが、その一つが、

overflow の値が visible 以外であるブロック要素

ブロック整形コンテキスト - 開発者ガイド | MDN

ということで、ご質問の現象が起きます。

---

なお、要素を横並びにするためにフロートを使う手法は時代遅れのやり方ですので、2021年に学習する必要は低いと思います。フレックスレイアウトかグリッドレイアウトをご検討ください。