css - 为什么 div 背景不包含内部元素除非 float ？

Question

我有一个这样的 html block 。从div的背景颜色来看，外层div不包含内层，除非我从内层div中删除“float:left”，或者在外层div中添加“float:left”。这是为什么？ 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

你需要清除你的 float :

<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>

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