親ブロック要素の自動伸縮とoverflowで解決する理由

Question

前提・実現したいこと

独学でHTML/CSSでwebサイトのフロント部分を書いています。
知識としてはprogate修了レベル+α程度しかありません。

発生している問題・エラーメッセージ

<div class = "wrapper">
  <div class = "container">
    子要素（中身）
  </div>
</div>

のようなコードを書いた際、wrapperやcontainer等のブロック要素の大きさが子要素の大きさに対して
・自動的に広がる場合と
・自分でheightを指定しないと最小の大きさになってしまう場合
の違いが分かりません。
また、解決策としてheightをautoとしoverflowをhiddenで設定すれば良いという事に辿り着きましたが、その仕組みが分かりません。

・親ブロック要素が自動で広がるときと広がらないときの違い
・height:auto overflow:hidden　とした際に自動で広がらないブロック要素問題が解決する理由

をご教授頂けませんでしょうか。

Answer 1

・親ブロック要素が自動で広がるときと広がらないときの違い

たぶん、子要素に float か position: absolute;（絶対位置指定）を設定したときですね。

float - CSS: カスケーディングスタイルシート | MDN

絶対位置指定

どちらも通常フローから外れるので、親要素から見たら存在しないものとみなされます。よって中身がないので高さ0になります。

・height:auto overflow:hidden　とした際に自動で広がらないブロック要素問題が解決する理由

float を設定したときは、これで解決しますね。

overflowプロパティではfloatで浮いている子要素の高さを認識するからだそうです。

【CSS】clearfixを使わないfloat解除「overflow: hidden」

Comments

[towa-y]

何故そうなるのか、とてもよく理解できました。
ありがとうございました。