高度塌陷

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

推荐阅读更多精彩内容