親コンテナを拡張するために子のマージンが必要な場合があります。親の外側のスペースが割り当てられているのに、親自体が拡張されていないことがわかりました。次に、親に「overflow:hidden」を追加することで、この問題を修正できることがわかりました。
なぜこれが当てはまるのか、誰かが何か光を当てることができますか?
アップデート:
親にパディングまたはボーダー値を追加すると、これも修正されることがわかりました。
「なぜ」に対する答えは、ここでよく簡潔に説明されています。「ブロック書式設定コンテキスト」を確立する特定のプロパティがあります。すなわち:
フロート、絶対 [および固定] 配置要素、ブロック ボックスではないブロック コンテナー (インライン ブロック、テーブル セル、テーブル キャプションなど)、および「可視」以外の「オーバーフロー」を含むブロック ボックス (その場合を除く)値がビューポートに反映されている場合)、そのコンテンツの新しいブロック フォーマット コンテキストを確立します。
上記のコメントで与えられたような解決策がどのように機能するか(および前の の場合は、後続の流入要素) が機能する理由は、ブロックの書式設定コンテキストのこの変更です。margin
float
padding
マージンの崩壊が理由だと思います:http://www.w3.org/TR/CSS2/box.html#collapsing-margins