overflow:hidden 的主要功能有三个：
- 隐藏溢出
- 清除浮动
- 解除坍塌
初始css样式：
运行结果：
如图：
为了隐藏子元素溢出的部分，可以为父div设置 overflow:hidden
当父div没有设置高度时，我们为div1和div2加上一个属性：float:left后，我们会发现：背景色为黑色父div消失了。
这是因为：浮动的元素脱离文档元素，不占据空间。不浮动的元素会直接无视掉这个元素：父div无视了自己的两个孩子，其高度为0（因为我们没有设置父div的高度），所以父div没有显现。
想让父div显现，有两个办法：
1.让父div也浮动起来
效果：
发现颜色块出现在屏幕右侧，父div浮动有效果，但是没有看到父div的黑色效果，这是因为浮动的div已经失去了其“独霸一行”的能力，我们需要手动为父div设置一个宽度，比如width:500px，之后可以看到：
2.为父div添加：overflow:hidden属性用以清除浮动
效果：
总结：
- 1和2，一个使用了都浮动的战略，一个使用了清除浮动的战略使父div宽容的接受了子div。
- 两者的区别在于都浮动需要额外设定父div的宽度，因为浮动起来的div失去了div独占一行的特性，而清除浮动的父div仍然独占一行。
可以使用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的问题,有下列方法：
1.为父div设置边框，当然可以设置透明边框。
效果：
2.给父div添加padding，让父div将子div挤下去。
效果：
但是上面两种方法都会改变盒子大小。
3.使用 overflow: hidden 解除坍塌。
效果：
4.浮动的div不会坍塌
效果：
总结
overflow:hidden的用法在隐藏溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/12790.html