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

Question

我有一个像这样的html块.根据div的背景颜色判断,外部div不包含内部div,除非我从内部div中删除"float:left",或者将"float:left"添加到外部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.该clearCSS属性强制最后一个浮动元素后,移动元素,所以当你把你的浮动元素下方的空div给予它的clear风格,外格会延伸到包含它.