CSS 清除浮动导致的影响

高度塌陷

当父元素的子元素浮动（所有子元素），父元素会因为没有内容支撑而高度塌陷

代码

可以看到父元素是没有高度的，页面上看不到背景色为红色的区域。

<div style="background-color: red">
    <span style="float: right">按钮</span>
</div>

解决

父元素添加overflow: hidden属性，使父元素变为BFC。

<div style="background-color: red;">
    <span style="float: right">按钮</span>
</div>