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也必須要包含其中。所以會計算子容器的高度。取最大子容器高度才能包含。

為什麽overflow:hidden;屬性可以清除浮動