为什么overflow:hidden;属性可以清除浮动

Posted 2020-09-22 douglasvegas

overflow:hidden;顾名思义，溢出容器部分隐藏。为什么它可以起到清除浮动的作用呢？我们来制造一个父容器不定高，子容器进行浮动的界面。

<div class=‘parent‘>
  <div class=‘left‘></div>
  <div class=‘right‘></div>
</div>

.parent {
  width:200px;
  background:#333333;
  overflow:hidden;
}
.left {
  float:left;
  width:50px;
  height:100px;
  background:red;
}
.right {
  float:right;
  width:80px;
  height:120px;
  background:green;
}

我们会发现这个不定高的父DIV有了高度，高度为子容器中最高的那个。如果去掉overflow:hidden，则父容器"消失"（因为没有高度了）。

原因为何？BFC！！

什么是BFC ? 

BFC全称Block Formatting Context, 中文为「块级格式化上下文」。触发BFC有以下几种情况：

1. float值不为none
2. overflow值为auto，scroll或hidden
3. display值为table-ceil，table-caption或inline-block的一种
4. position值不为relative和static

此处parent触发了BFC，形成块级上下文，不管子元素怎么浮动怎么脱离文档流，parent也必须要包含其中。所以会计算子容器的高度。取最大子容器高度才能包含。