内容简介：下面用例子来加深理解：初始
overflow:hidden 的主要功能有三个：
- 隐藏溢出
- 清除浮动
- 解除坍塌
下面用例子来加深理解：
初始 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;
}
运行结果：
使用 overflow: hidden 隐藏溢出
默认情况下，父 div 没有设置高度，它的高度可以被子 div 任意撑大。
当父 div 有固定高度时，如果子 div 的高度超过父 div 的高度，那么子 div 会超出父 div 的束缚，这种情况就叫溢出。
如图：
.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 清除浮动
当父 div 没有设置高度时，我们为 div1 和 div2 加上一个属性： float:left 后，我们会发现：背景色为黑色父 div 消失了。
这是因为： 浮动的元素脱离文档元素， 不占据空间 。 不浮动的元素会直接无视掉这个元素：父 div 无视了自己的两个孩子，其高度为0（因为我们没有设置父div的高度），所以父 div 没有显现。
.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 显现，有两个办法：
（1）让父 div 也浮动起来
.container{
background-color: black;
float: right;/*让父div右浮动*/
}
效果：
发现颜色块出现在屏幕右侧，父 div 浮动有效果，但是没有看到父 div 的黑色效果，这是因为 浮动的 div 已经失去了其“独霸一行”的能力 ，我们需要手动为父 div 设置一个宽度，比如 width:500px ，之后可以看到：
.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 解除坍塌
可以使用 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;
}
效果：
（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——溢出,坍塌,清除浮动
- 缓冲区溢出（栈溢出）
- Linux kernel 4.20 BPF 整数溢出-堆溢出漏洞及其利用
- 缓冲区溢出实战教程系列（一）：第一个缓冲区溢出小程序
- 小议缓冲区溢出
- Nginx栈溢出分析
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Practical Vim, Second Edition
Drew Neil / The Pragmatic Bookshelf / 2015-10-31 / USD 29.00
Vim is a fast and efficient text editor that will make you a faster and more efficient developer. It’s available on almost every OS, and if you master the techniques in this book, you’ll never need an......一起来看看 《Practical Vim, Second Edition》 这本书的介绍吧!
