今天接觸了一個CSS的BFC概念苫幢，這不是個新東西绳匀，反而是老早就有的姆另，BFC平時也經常使用肺魁，是自己沒有系統(tǒng)的概念沥阳。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”宛篇。啪啦啪啦特性什么的芹务，一言難盡豌鹤，大家可以自行去查找亡哄，我這里不詳述，免得亂了主次布疙，總之蚊惯，記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海灵临，翻云覆雨都不會影響外部的元素截型。所以，避免margin穿透啊儒溉，清除浮動什么的也好理解了宦焦。
這是引用大神的總結，通俗易懂又精準，本文算是該文章的讀書筆記波闹。張鑫旭CSS深入理解流體特性和BFC
總的來說酝豪，實現BFC的方法有不少，但由于前端發(fā)展迅猛精堕，很多方法都隨著ie老版本的淘汰也不實用了孵淘。剩下有比較實用的兩種方法：
一個就是 overflow:hidden ；
一個就是 display:table-cell 加 width:9999px 歹篓；
這個兩個在實現自身流體特征（內容區(qū)域會隨著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;
}`
如圖是看不到子標簽的刀闷，而如果換成
display:table-cell就可以了:
.bfc{ border:1px solid yellow; display: table-cell; width:9999px; position: relative; }
至于width:9999px是為了自適應，占滿剩余的空間仰迁，因為table-cell的特性設定100%是沒用的甸昏，而cell另一個屬性就是不管你設定多寬，它都不會超出外容器的寬徐许。但是當標簽加上dispaly:table-cell后施蜜，margin就無效了。雌隅。翻默。。恰起。
