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

时间 2019-12-04

标签 css 深刻理解 overflow hidden 隐藏溢出清除浮动解除栏目 CSS 繁體版

原文原文链接

overflow:hidden 的主要功能有三个：css

隐藏溢出
清除浮动
解除坍塌

下面用例子来加深理解：html

初始html内容：浏览器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>
</html>

初始css样式：布局

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

运行结果：
ui

使用 `overflow: hidden` 隐藏溢出

默认状况下，父div没有设置高度，它的高度能够被子div任意撑大。
当父div有固定高度时，若是子div的高度超过父div的高度，那么子div会超出父div的束缚，这种状况就叫溢出。
如图：spa

.container{
  background-color: black;
  height: 150px; /*给父div添加固定高度*/
}

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

为了隐藏子元素溢出的部分，能够为父div设置 overflow:hidden:设计

.container{
  background-color: black;
  height: 150px; /*给父div添加固定高度*/
  overflow: hidden; /*隐藏溢出*/
}

使用 `overflow:hidden` 清除浮动（触发BFC，BFC能够包含浮动的元素（清除浮动））

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

.container{
  background-color: black;
}

.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}
.div1,.div2{
  float: left;/*让两个子div浮动*/
}

想让父div显现，有两个办法：htm

（1）让父`div`也浮动起来

.container{
  background-color: black;
  float: right;/*让父div右浮动*/
}

效果：

发现颜色块出如今屏幕右侧，父div浮动有效果，可是没有看到父div的黑色效果，这是由于浮动的div已经失去了其“独霸一行”的能力，咱们须要手动为父div设置一个宽度，好比width:500px，以后能够看到：ip

.container{
  background-color: black;
  float: right;/*让父div右浮动*/
  width: 500px; /*给父div设置宽度*/
}

（2）为父`div`添加： `overflow:hidden` 属性用以清除浮动

.container{
  background-color: black;
  overflow: hidden; /*给父div清除浮动*/
}

效果：

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

使用 `overflow:hidden` 解除坍塌（触发BFC）

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

什么叫作坍塌：

为div1 添加一个属性： margin-top: 50px; 本想获得这样的效果：

但是结果：总体下移了。

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外边距*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。

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

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

解决父子div中顶部margin cllapse的问题,有下列方法：

（1）为父`div`设置边框，固然能够设置透明边框。

.container{
  background-color: black;
  border: 1px solid;/*设置边框*/
}

效果：

（2）给父div添加padding，让父div将子div挤下去。

.container{
  background-color: black;
  padding-top: 50px;
}

效果：

可是上面两种方法都会改变盒子大小。

（3）使用 `overflow: hidden` 解除坍塌。

.container{
  background-color: black;
  overflow: hidden; /*解除坍塌*/
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外边距*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}
效果：
![clipboard.png](/img/bVbsV8n)

（4）浮动的`div`不会坍塌。

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外边距*/
  float: right; /*添加右浮动*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

总结：

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

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

使用 overflow: hidden 隐藏溢出

使用 overflow:hidden 清除浮动（触发BFC，BFC能够包含浮动的元素（清除浮动））

（1）让父div也浮动起来

（2）为父div添加： overflow:hidden 属性用以清除浮动

使用 overflow:hidden 解除坍塌（触发BFC）