今天接觸了一個CSS的BFC概念，這不是個新東西，反而是老早就有的，BFC平時也經常使用，是自己沒有系統的概念。

BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什么的也好理解了。

這是引用大神的總結，通俗易懂又精準，本文算是該文章的讀書筆記。張鑫旭CSS深入理解流體特性和BFC

總的來說，實現BFC的方法有不少，但由于前端發展迅猛，很多方法都隨著ie老版本的淘汰也不實用了。剩下有比較實用的兩種方法：

一個就是 overflow:hidden ；

一個就是 display:table-cell 加 width:9999px ；

這個兩個在實現自身流體特征（內容區域會隨著margin, padding, border的出現自動填滿剩余空間）的情況下，還能自適應布局。

overflow:hidden 就不用多說了，平時用的很多，以前我的理解就是包裹浮動元素，和其他標簽分清界限，其實這就算是BFC的概念。這次看張大神的文章，一來是清晰了這個概念，第二個就是學會了第二種BFC的方法。
overflow:hidden 在子標簽有超出父容器的情況下是用不了的，會把子標簽部分隱藏掉，以前我就遇上過這種問題，我都忘了是怎么處理的。如：

`.con{
    width:500px;
    border:1px solid blue;
    padding:20px;
}
.fl{
    float: left;
    width:200px;
    border:1px solid red;
}
.bfc{
    border:1px solid yellow;
    overflow:hidden;
    position: relative;
}
.child{
    width:100px;
    height: 100px;
    background: #000;
    color:#fff;
    position: absolute;
    top:100px;
    left:100px;
}`

.bfc{ border:1px solid yellow; display: table-cell; width:9999px; position: relative; }

至于width:9999px是為了自適應，占滿剩余的空間，因為table-cell的特性設定100%是沒用的，而cell另一個屬性就是不管你設定多寬，它都不會超出外容器的寬。但是當標簽加上dispaly:table-cell后，margin就無效了。。。。。