2022-01-05 overflow:hidden的作用有哪些?它解决高度塌陷的原理是什么?

原创已于 2025-03-22 15:34:13 修改

· 98 阅读

0 ·

版权

文章标签：

#css #html #css3 #BFC

于 2022-01-05 22:32:03 首次发布

知识点同时被 3 个专栏收录

96 篇文章

订阅专栏

面试

42 篇文章

订阅专栏

css

14 篇文章

订阅专栏

一.总结

1.overflow:hidden可以用来设置溢出隐藏,清除浮动(解决高度塌陷),解决外边距坍塌

2.它解决高度塌陷的原理是设置overflow:hidden的元素会触发BFC,BFC的原理是会让设置浮动的子元素也计算高度,缺点是会影响定位在元素外面的元素

二.代码验证

1.溢出隐藏

  <style>
    #one{
      width: 100px;
      height: 50px;
      background-color: aliceblue;
      overflow:hidden;
    }
  </style>
</head>
<body>
  <div id="one">床前明月光,疑是地上霜,举头望明月,低头思故乡</div>
</body>

效果:略

2.解决高度坍塌

  <style>
    #two{
      width: 300px;
      background-color: aliceblue;
      overflow:hidden;
    }
    .child{
      width: 100px;
      height: 100px;
    }
    .left{
      background-color: blue;
      float: left;
    }
    .right{
      background: red;
      float:right;
    }
  </style>
</head>
<body>
  <div id="two">
      <div class="child left"></div>
      <div class="child right"></div>
  </div>
</body>

效果:略

3.解决外边距塌陷:子元素设置margin-top导致父元素跟着下拉

  <style>
    #three{
      width: 300px;
      height: 300px;
      background-color: pink;
      overflow:hidden;
    }
    .child{
      width: 100px;
      height: 100px;
      background: blue;
      margin-top:20px;
    }
  </style>
</head>
<body>
  <div id="three">
      <div class="child"></div>
  </div>
</body>

效果:略

三.延伸内容:高度塌陷都有哪些解决方法?

1.父元素设置固定高度

2.子元素后面创建一个空盒子

3.子元素后面设置伪元素

4.overflow:hidden

四.延伸内容:overflow:hidden为什么可以解决高度塌陷?BFC和它的原理是什么?

BFC（Block Formatting Context），块级格式化上下文，
它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

1、BFC布局规则

内部的块级元素会在垂直方向，一个接一个地放置；
块级元素垂直方向的距离由margin决定。
属于同一个BFC的两个相邻的块级元素会发生margin合并，
不属于同一个BFC的两个相邻的块级元素不会发生margin合并；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
计算BFC的高度时，浮动元素也参与计算。
详解:

为什么"overflow:hidden"能清除浮动的影响。
我们经常会在父元素里设置某个子元素浮动。
浮动后，子元素脱离了文档流，使得父元素无法包住这个浮动的子元素。
我们通常在父元素上设置一个clearfix的伪元素来清除浮动；
同样，我们可以利用BFC可以包含浮动这一特性来清除浮动

在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。
因此，父元素在计算其高度时，加入了浮动元素的高度，
“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

2、创建一个BFC

首先我们要知道怎样创建BFC。一个BFC可以被显式触发，只需满足以下条件之一：

float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex。

3.BFC的另一应用:消除margin合并

对于发生margin合并的元素，我们怎样消除margin合并？

对于父子元素，我们可以通过设置padding、border、inline content、height、min-height、max-height等属性来消除；
但是相邻的兄弟元素之间必出现margin合并，这时如果想要消除margin合并，又该怎么办？

我们首先要搞清楚为什么会发生margin合并。这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，
是因为它们属于同一个BFC。
所以，只要让它们不属于同一个BFC就可以了

关键代码:

#top{
	......
	margin-bottom:30px;
	overflow:hidden;
}
#bottom{
	margin-top:20px;
}

效果:两个相邻元素的上下间距从30px变成50px