先來看兩個overflow:hidden的使用例子

1、嵌套布局內部塊元素設置float:left時，導致外部元素塌方，高度為0的問題。

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
</div>

.wrap {
    outline: red 1px solid;
    width: 250px;
    /*overflow: hidden;*/
}

.item {
    height
 
: 20px;
    width: 100px;
    outline: blue 1px solid;
    float: left;
    margin: 10px;
}

通過去掉wrap CSS中的overflow: hidden;的註釋，顯示效果如下：

2、左右布局DIV，左側DIV設置為float: left， 當右側DIV高度超過左側DIV時，右側內容向左塌陷問題。

<div>
    <div class="left"></div>
    <div class="content">
        <
 
div>AAAAAAAAAAAAAAAAAA</div>
        <div>BBBBBBBBBBBBBBBBBB</div>
        <div>CCCCCCCCCCCCCCCCCC</div>
    </div>
</div>

.left {
    float: left;
    height: 20px;
    width: 100px;
    outline: red 1px solid;
}

.content {
    /*overflow: hidden;
 
*/
    outline: green 1px solid;
    width: 250px;
}

.content div {
    outline: blue 1px solid;
    margin: 5px;
    height: 20px;
}

通過以上兩個例子，我們發現overflow: hidden;在布局時有神奇的治理布局塌方的功效。

其實，這是CSS2.1中定義的一個叫BFC(Block formatting context)的概念在起作用。所謂BFC，可直譯為“塊格式化上下文”，BFC定義了一塊獨立的渲染區域，規定了其內部塊級元素的渲染規則，其渲染效果不受外界環境的幹擾。

BFC定義了如下布局規則：

1. 內部的塊元素會在垂直方向，一個接一個地放置。
2. 塊元素垂直方向的距離由margin決定。兩個相鄰塊元素的垂直方向的margin會發生重疊。
3. 每個元素的左外邊距，與包含塊的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4. BFC的區域不會與float元素的區域重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

以上的兩個例子，就分別用到了規則的6和4。

那麽，在什麽情況下，元素的BFC才能生效呢？

根據CSS規範，當給元素添加下列Style屬性時，元素成為一個BFC元素。

1. float為 left|right
2. overflow為 hidden|auto|scroll
3. display為 table-cell|table-caption|inline-block
4. position為 absolute|fixed

神奇的overflow:hidden及其背後的原理