高度塌陷

QQ截图20170527164120.png

<div>
    <div style="float:left;width:200px;height:200px;background:red;"></div>
    <div style="float:left;width:200px;height:200px;background:blue;"></div>
    <div style="float:left;width:200px;height:200px;background:orange;"></div>
    <div style="float:left;width:200px;height:200px;background:yellow;"></div>
</div>

以上的代码中，我们定义了四个背景颜色不一致，大小一致的盒子，并对每个盒子设置了左浮动，四个盒子被包裹在div盒子中。

chrome开发者工具中，我们看到外层盒子的高度变成了0。内部盒子的高度是200px，正常情况下，父元素的高度是子元素的高度。

这里因为给四个盒子设置了浮动，引起了高度塌陷。当没有高度的父级盒子里的元素设置了浮动的时候。父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变成0，或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做高度塌陷。

解决方法：

1. 父级元素设置overflow:hidden;或者position:absolute或者position: fixed;
   2.清除浮动:父级元素添加clearfix

.clearfix{*zoom:1}
.clearfix:after{
   content:"\0020";
   display:block;
  clear:both;
   width:0;
   height:0;
}