1. bfc
BFC(Block formatting context) 中文：塊級(jí)格式化上下文
2.如何創(chuàng)建bfc
一個(gè)html元素滿(mǎn)足以下的條件中的一條都可以：
float:left;
overflow:auto/hidden/scroll;
display:inline-block/table-cell/flex/inline-flex
position:absolute/fixed
BFC有一下特性：
內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box疊加。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
在哪些場(chǎng)景可以用到BFC：
自適應(yīng)兩欄布局：
.content{width:500px;height:500px;background-color: #cccccc;}
.content_img{float:left;width:100px;height:100px;margin-right:10px;}
.content_txt{overflow: auto;zoom: 1;width:300px;height:100px;background:yellow}
效果：
清除內(nèi)部浮動(dòng):
css：
dom
效果：
明顯這個(gè)不是我們要的結(jié)果
對(duì) content_box添加 overflow:hidden;
清除垂直margin 重疊：
相應(yīng)的margin,已經(jīng)發(fā)生了重疊了
把子元素再次包在bfc中
當(dāng)他們不處于同一個(gè)bfc時(shí)，他們之間不會(huì)有邊距的重疊
