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