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

﹏ヽ暗。殇╰゛Y 2022-06-15 03:39 176阅读 0赞

基本演示代码：  
HTML代码：

CSS代码：

*{ margin: 0; padding: 0; }
    .box{ background: #333; }
    .box1{ background: orange; width: 100px; height: 100px; }
    .box2{ background: green; width: 100px; height: 100px; }

效果：  
![这里写图片描述][SouthEast]  
**1.使用overflow：hidden隐藏溢出**  
当父div拥有固定的高度时，比如height:150px,我们使用overflow:hidden来隐藏溢出。  
当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:150px，那么如果子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，之后可以看到：  
![这里写图片描述][SouthEast 1]  
（2）第二种就是为父亲添加overflow:hidden属性用以清除浮动；  
![这里写图片描述][SouthEast 2]  
清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素：  
1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握；  
2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；  
3、加上 zoom:1 ，不能通过W3C验证。  
**3.解除坍塌**  
可以使用overflow:hidden解除margin坍塌，当然了，坍塌是不分父div的高度是否固定的 ；  
首先要知道什么叫做坍塌：  
我们为box1添加一个属性：margin-top:50px,我们想象中效果是这样的：  
![这里写图片描述][SouthEast 3]  
但实际上是这样的（这是开发人员工具下的效果）:  
![这里写图片描述][SouthEast 4]  
上端距离浏览器的顶部有50px而不是对它的父div，更可怕的是它甚至向下顶了它的父div，这就是坍塌。这里多说一句：这种坍塌只针对于父亲的第一个儿子，div2设置margin-top：50px则不会有任何不妥。  
（1）我们可以为父div添加overflow:hidden解决这个问题;  
（2）这里为了排除overflow:hidden对未定高度的父div的影响，我们为父div设置一个高度；我们为所有子div添加一个浮动属性（比如float:left），显而易见，只要是浮动的子div就会完全避免坍塌的问题（PS：无论父div是否浮动）；  
**总结**  
overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。

[SouthEast]: /images/20220615/753842087a6c455f94aedf7b2afc090c.png
[SouthEast 1]: /images/20220615/4062b5b74e724503b7fcb640da6b3231.png
[SouthEast 2]: /images/20220615/1f54466f6d764f06805fe322e7be7e2b.png
[SouthEast 3]: /images/20220615/e69a4d57b3844e81ad94c7505cfd85bc.png
[SouthEast 4]: /images/20220615/8c1a13655349467a829656d92aaa334e.png