利用overflow:hidden解决溢出隐藏、清除浮动、解决外边距塌陷；

1、overflow:hidden 清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。·见示例·

由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。

由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;
所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;

  • Example：
    ```css .box{background: skyblue;} .kid{width: 100px;height: 100px;float: left;} .kid1{outline: yellow dashed 1px; background-color: yellow;} .kid2{outline: orange dashed 1px;background: orange;} .wrap{width: 300px;height: 150px; background: blue;color: #fff;}

/ 需要加上这一句CSS代码 / .box{overflow: hidden;zoom: 1; /ie7/}cs

  1. ```html
  2. <div class="box">
  3.     <div class="kid kid1">子元素1</div>
  4.     <div class="kid kid2">子元素2</div>
  5. </div>
  6. <div class="wrap">其他部分</div>

2、overflow:hidden 解决外边距塌陷

设置marin-top后，父元素并与子元素把并没有空出，反而导致跟子元素黏在一起的情况。

.box{
    background: skyblue;
    overflow: hidden; /*解决外边距塌陷问题*/
}
.kid{width: 100px;height: 100px;background-color: yellow;margin-top: 20px;}

<div class="box">
    <div class="kid">子元素1</div>
</div>

3、overflow:hidden 实现溢出隐藏

  • 略：无需讲解。