html - 子の幅または高さを取らない要素

Question

私は時々この問題に出くわしましたが、何が原因なのか理解できませんでした。

<div id="wrapper">
    <div id="primary">content</div>
    <div id="secondary">content</div>
 </div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

次に、Chrome の inspect 要素のプロパティを確認すると、ラッパー div が高さ 0px、幅 0px として表示されます。

Answer 1

これは一般に、clearfixの問題と呼ばれます。インライン スタイルの div を下に配置する代わりにoverflow:hidden、ラッパー div に割り当てることもできます。

問題のクリアに関する詳細については、A List Apart: CSS Floats 101を参照してください(セクション 6:特に折りたたみ)

Answer 2

<div style='clear:both'></div>の下に を追加する必要があります<div id='secondary'/>。CSS タグ "float" により、親は子が実際に終了する場所を確認できません。フロートの左側と右側をクリアする div を追加すると、親要素がスペースを正しく埋めることができます。