今天接觸了一個CSS的BFC概念，這不是個新東西，反而是老早就有的，BFC平時也經(jīng)常使用，是自己沒有系統(tǒng)的概念。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什么的也好理解了。
這是引用大神的總結(jié)，通俗易懂又精準(zhǔn)，本文算是該文章的讀書筆記。張鑫旭CSS深入理解流體特性和BFC
總的來說，實(shí)現(xiàn)BFC的方法有不少，但由于前端發(fā)展迅猛，很多方法都隨著ie老版本的淘汰也不實(shí)用了。剩下有比較實(shí)用的兩種方法：
一個就是 overflow:hidden ；
一個就是 display:table-cell 加 width:9999px ；
這個兩個在實(shí)現(xiàn)自身流體特征（內(nèi)容區(qū)域會隨著margin, padding, border的出現(xiàn)自動填滿剩余空間）的情況下，還能自適應(yīng)布局。
overflow:hidden 就不用多說了，平時用的很多，以前我的理解就是包裹浮動元素，和其他標(biāo)簽分清界限，其實(shí)這就算是BFC的概念。這次看張大神的文章，一來是清晰了這個概念，第二個就是學(xué)會了第二種BFC的方法。
overflow:hidden 在子標(biāo)簽有超出父容器的情況下是用不了的，會把子標(biāo)簽部分隱藏掉，以前我就遇上過這種問題，我都忘了是怎么處理的。如：
`.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;
}`
如圖是看不到子標(biāo)簽的，而如果換成
display:table-cell就可以了:
.bfc{ border:1px solid yellow; display: table-cell; width:9999px; position: relative; }
至于width:9999px是為了自適應(yīng)，占滿剩余的空間，因為table-cell的特性設(shè)定100%是沒用的，而cell另一個屬性就是不管你設(shè)定多寬，它都不會超出外容器的寬。但是當(dāng)標(biāo)簽加上dispaly:table-cell后，margin就無效了。。。。。
