BFC(block formatting context)：塊級格式化上下文，一個獨立容器，決定了元素如何對其内容進行定位,以及與其他元素的關系和相互作用。一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。 不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box内的元素會以不同的方式渲染,也就是說BFC内部的元素和外部的元素不會互相影響。
BFC布局規則：1.内部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如 此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
哪些元素會生成BFC?1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible( hidden,scroll,auto, )
BFC有什麼用？1.自适應兩欄布局：
根據BFC布局規則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據BFC布局規則第四條：
BFC的區域不會與float box重疊。
我們可以通過通過觸發main生成BFC， 來實現自适應兩欄布局。
.main { overflow: hidden; }
當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：
2. 清除内部浮動
.par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; } <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
根據BFC布局規則第六條：
計算BFC的高度時，浮動元素也參與計算
為達到清除内部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par内部的浮動元素child也會參與計算。
.par { overflow: hidden; }
效果如下：
3. 防止垂直 margin 重疊
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body>
兩個p之間的距離為100px，發送了margin重疊。
根據BFC布局規則第二條：
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那麼兩個P便不屬于同一個BFC，就不會發生margin重疊了。
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body>
效果：間距變大
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
