css - CSS 没有展开

Question

为什么父 div 不扩展以适应内部 div？

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 500px; border-bottom: 1px solid black;">
    Menu
</div>
<div style="float: left; width: 500px;">
    text goes here
</div>

http://jsfiddle.net/C7MHY/1/

Answer 1

因为内部 div 是浮动的。您可以在浮动 div 之后添加一个“更清晰”（CSS 属性clear设置为left或的元素both）来实现您想要的效果。

或者，您可以添加float: left到外部 div。另一个浮动元素内的所有浮动元素都会“自动清除”。

见http://jsfiddle.net/vovkss/WcSyM/

Answer 2

我不知道如何解释，但如果你把 display: table 放在你的父 DIV 上就可以了。

<div style="display: table; width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
    <div style="float: left; width: 500px; border-bottom: 1px solid black;">
        Menu
    </div>
    <div style="float: left; width: 500px;">
        text goes here
    </div>
</div>

Answer 3

因为内部 div 的样式是浮动的。为了克服这个问题，你必须像这样添加另一个内部 div：

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 500px; border-bottom: 1px solid black;">
    Menu
</div>
<div style="float: left; width: 500px;">
    text goes here
</div>
<div style="clear:both;"></div>
</div>

进一步阅读：
MDN：浮动
MDN：清除

Answer 4

除了清除浮动（如其他答案中所述）...

或者，您也可以添加规则

overflow:hidden或overflow:auto到父 div。

小提琴

Answer 5

父 div 没有高度，请尝试使用 height:auto。