CSS深刻理解：overflow:hidden——溢出,坍塌,清除浮动

overflow：hidden是overflow属性的一个神奇用法，它能够帮助咱们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，不免令人难以把握，不过不要怕，只要信：看完这篇文章，我相信你绝对能对overflow:hidden的用法熟练掌握。

下面的代码将做为基本演示代码，每次讲解一个新的做用，咱们都要将代码恢复成下面这个样子：

CSS样式：

.container{
      background-color: black;
           }

.div1{
      background-color: aqua;
      width: 100px;
      height: 100px;
      }
.div2{
       background-color: red;
       width: 100px;
       height: 100px;
     }复制代码

html内容：

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>复制代码

程序运行效果：

1.使用 overflow：hidden 隐藏溢出

当父 div 拥有固定的高度时，好比 height:500px ,咱们使用 overflow:hidden 来隐藏溢出。

当使用div+css布局时，会出现不少的div嵌套——父div内嵌套一个或多个的子div，默认状况下，父div的高度是 auto ——它能够被子div任意的撑大。然而父div也能够有固定的高度(或宽度)，好比 height:500px ，那么若是子div的高度超过了这个值，在默认状况下，子div会超出父div的束缚，这就是溢出。咱们能够经过设置父div的CSS属性——overflow来对子div进行控制。这里使用 overflow:hidden 来隐藏子元素溢出的部分。

2.使用 overflow：hidden 清除浮动

当父元素的高 height: auto 时，咱们使用 overflow：hidden 清除浮动

当咱们为 div1 和 div2 加上一个属性：float: left 后，咱们会发现：背景色为黑色父div消失了，这是由于： 浮动的元素脱离文档元素， 不占据空间。 不浮动的元素会直接无视掉这个元素：父div无视了本身的两个孩子，其高度为0（由于咱们没有设置父div的高度），因此父div没有显现。

想让父div“宽容的”接受本身的两个孩子有两个办法：

（1）第一个就是让父亲也浮动起来，咱们试着给父div添加一个CSS属性：float: right,会发现两个颜色块出如今了屏幕的右边，依然没有父div的身影，然而经过开发人员工具不难看出父div已经包容子div

这是由于浮动的div已经失去了其“独霸一行”的能力，咱们须要手动为父div设置一个宽度，好比width:500px，以后能够看到：

（2）第二种就是为父亲添加 overflow:hidden 属性用以清除浮动

.container{ background-color: black; overflow:hidden;}

这时的效果如图所示：

总结：

（1）（2）一个使用了都浮动的战略，一个使用了清除浮动的战略使父 div 宽容的接受了子 div，二者的区别在于都浮动须要额外设定父div的宽度，由于浮动起来的 div 失去了 div 独占一行的特性，而清除浮动的父 div 仍然霸道。

3. 解除坍塌

可使用 overflow:hidden 解除margin坍塌，固然了，坍塌是不分父div的高度是否固定的

首先要知道什么叫作坍塌：

咱们为div1添加一个属性：margin-top:50px ，咱们想象中效果是这样的：

但其实是这样的（这是开发人员工具下的效果）：

CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面 div 的 margin-bottom 和下面 div 的 margin-top 会塌陷，也就是会取上下二者margin里最大值做为显示值，因此从这个意义上说：CSS及浏览器的设计者们但愿咱们在布局时，若是遇到上下两个并排内容块的安排，最好只设置其中每一个块上或下 margin 的一处便可。

但对于父块DIV内含子块DIV的状况，就会按另外一条CSS惯例来解释了，那就是：对于有块级子元素的元素（父元素）计算高度的方式，若是元素没有上下边框和填充，那其高度就是第一个子元素顶部和底部边框边缘之间的距离。

结论：

解决父子DIV中顶部margin cllapse的问题，须要给父 div 设置：

一、边框，固然能够设置边框为透明;

二、为父DIV添加 padding，或者至少添加padding-top;

此外，还能够经过 overflow 来解决

（1）咱们能够为父div添加 overflow: hidden 解决这个问题：

.container {
  background-color: black;
  overflow: hidden;
}复制代码

效果如图所示：

（2）会思考的读者必定会考虑浮动能不能解决这个烦人的问题，这里为了排除overflow:hidden对未定高度的父div的影响，咱们为父div设置一个高度：

.container {
  background-color: black;
  height: 200px;
}复制代码

咱们为全部子div添加一个浮动属性（好比 float:left ），显而易见，只要是浮动的子div就会彻底避免坍塌的问题（PS：不管父 div 是否浮动）：

可使用 overflow: hidden 来解除坍塌，浮动的div根本不用考虑坍塌。

4.总结

overflow: hidden 的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。