为何设置overflow为hidden能够清除浮动带来的影响

时间 2019-12-11

标签为何设置 overflow hidden 能够清除浮动带来影响繁體版

原文原文链接

1.问题起源　　html

　　在平时的业务开发写CSS中，为了知足页面布局，元素的浮动特性咱们用的不能再多了。使用浮动的确可以解决一些布局问题，可是也带了一些反作用影响，好比，父元素高度塌陷，咱们有好几种能够清除浮动的方法，最经常使用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候老是这样写，可是，本身从没深度思考过这些写为何可以清除浮动，最近，本身也查阅了一些资料，谈谈本身的理解。布局

2.情景再现spa

先上代码：3d

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动</title>
  <style>
    .container{
      border: 1px solid #000;
　　   background: #0f0;
    }
   .child{
     float: left;
   }
  </style>
</head>
<body>
<div class="container">
 <div class="child">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum!
 </div>
</div>
</body>
</html>

代码很简单，就是父元素container里面包含了一个子div元素child，而后咱们使子元素的div向左浮动，页面展现效果以下：code

结果来看，父元素只显示了四个方向边框的高度，背景颜色未显示，这是由于子元素浮动脱离文档流形成父元素高度塌陷。orm

3.解决方法htm

**
 .container{
      border: 1px solid #000;
      background: #0f0;
      overflow: hidden;
    }
**

只在container父元素加了一行overflow:hiddenblog

页面展现效果以下：ip

父元素高度被撑起来了，背景颜色也显示出来了。ci

4.BFC概念

咱们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。

先记住一个原则：若是一个元素具备BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。因此，BFC元素是不可能发生margin重叠的，由于margin重叠会影响外面的元素的；BFC元素也能够用来清楚浮动带来的影响，由于若是不清楚，子元素浮动则会形成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

如下状况会触发BFC:

<html>根元素
float的值不为none
overflow的值为auto，scroll，hidden
display的值为table-cell，table-caption和inline--block中的任何一个
position的值不为relative和static

显然咱们在设置overflow值为hidden时使container元素具备BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。

5.总结

　　设置overflow为hidden使元素具备BFC而不会受子元素的影响，可是当子元素过多须要滚动显示时，咱们能够设置overflow的值为auto或acroll，超出父元素以外的元素会被隐藏。使用overflo:hidden也具备必定的局限性，因此咱们应该根据具体的业务场景来选择合适的方法。

参考资料：

《CSS世界》-张鑫旭
overflow:hidden清除浮动原理解析及清除浮动经常使用方法总结