Question

我有一个像这样的html块。根据div的背景颜色判断，外部div不包含内部div，除非我删除＆＃34; float：left＆＃34;从内部div，或添加＆＃34;浮动：左＆＃34;到外部的div。这是为什么？ http://jsbin.com/ihiqoz/2/edit

<div style="width:900px; background-color:#1EFF1E">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
</div>

Answer 1

你需要清除浮动：

<div style="width:900px; background-color:#1EFF1E">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
    <div style="clear: left;"></div>
</div>

浮动元素会突破布局，因此周围的元素不会考虑div。 clear css属性强制元素在最后一个浮动元素之后移动，因此当您通过赋予clear样式将空div放置在浮动元素下方时，外部div将拉伸以包含它。

Answer 2

@ray;如果您的子元素中有float，那么您必须clear parent，所以只需将overflow:hidden写入其父级div clear。

例如：

<div style="width:900px; background-color:#1EFF1E; overflow:hidden">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
</div>

阅读本文了解更多http://www.quirksmode.org/css/clearing.html

Answer 3

你也可以在div的末尾添加<BR>，然后添加{{1}}。

编辑：您需要清除div。

除非浮动，为什么div背景不包含内部元素？

3 个答案: