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

WalkerXu 发布于2019-08-30 10:56 / 1942人阅读

摘要：使用解除坍塌触发可以使用解除坍塌，坍塌是不分父的高度是否固定的。解除坍塌添加外边距效果浮动的不会坍塌。它还额外肩负了解除坍塌的重任。

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

隐藏溢出

清除浮动

解除坍塌

下面用例子来加深理解：

初始html内容：




  
  
  
  Document

初始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 清除浮动（触发BFC，BFC可以包含浮动的元素（清除浮动））

当父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 解除坍塌（触发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是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。

专线服务超融合服务器深入理解系列清除浮动深入理解linux 深入理解webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114665.html

重拾css(9)——float

摘要：导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏，父子关系解除。 1.引言对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以，系统的学一学float是非常...

CollinPeng 2019-08-29 12:44 评论0 收藏0
清除浮动（clearfix）的常见方法

摘要：此时可能会对周围的布局产生影响，所以清除浮动，显得十分重要。主要的方法一使用属性添加伪元素通过在父元素后面添加一个伪元素，设置为并清除左右浮动解决问题。目前这个方法是最新的。总结如上所述，清除浮动有两大方法，使用属性和建立。背景当一个父元素包含的子元素都设置为float的时候，父元素的高度会出现坍塌的现象（见下图）。此时可能会对周围的布局产生影响，所以清除浮动，显得十分重要。sho...

Kahn 2019-08-30 13:19 评论0 收藏0
为什么设置overflow为hidden可以清除浮动带来的影响

摘要：以下情况会触发根元素的值不为的值为，，的值为，和中的任何一个的值不为和显然我们在设置值为时使元素具有，那么子元素浮动便不会带来父元素的高度坍塌影响。1.问题起源　　　　在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的ove...

JeOam 2019-04-23 13:09 评论0 收藏0
HTML+CSS复习之CSS基础篇

摘要：内容简述关于，确实太繁杂了，内容多。写好不易，基本上就这个调了。里面有许多属性是可以继承的，注意了，继承一定是继承父级元素的样式在这里我就列出可以继承的属性，和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。内容简述关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。大家肯定听过CSS奇淫技巧吧，关于这个我还没有去深入了解，只是说普通的效果啥的，我...

Salamander 2019-08-29 12:38 评论0 收藏0
前端技术之_CSS详解第四天

摘要：前端技术之详解第四天一第三天的小总结盒模型，什么是盒子所有的标签都是盒子。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的盒子居中的值可以为，表示自动。前端技术之_CSS详解第四天一、第三天的小总结盒模型box model，什么是盒子？　　所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。盒模型有哪些组成：　　width、hei...

番茄西红柿 2019-04-23 13:45 评论0 收藏0