BFC到底是神馬？

03-06

看看官方說法：

BFC是什麼？

對一個元素設置CSS，首先需要知道這個元素是block還是inline。而BFC就是用來格式化塊級盒子，同樣還有管理inline類型盒子的IFC，以及其他的FC。

FC（Formatting Context）：指頁面中一個渲染區域，並且擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關係和作用。

BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level Box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。

WTF？到底是什麼？

要理解BFC，首先要理解外邊距合併現象。為什麼外邊距合併，到HTML就為止了？因為HTML是BFC啊！合併到了BFC的隱形邊界，不就停止了嘛？！

推而廣之，每一個BFC，都是一個小HTML，在它們自己的宇宙中，遵循著自己的規則（特性），不被外界打擾，也打擾不了外界。

BFC的規則（特性）

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算。

後面兩個最重要。

BFC的作用

給margin合併加一個截止的位置。
contain float。

如何生成 BFC？

根元素；
float屬性值不為none；
position值為absolute或fixed；
display值為inline-block，或flex，或inline-flex；
overflow值不為visible。

舉例說明

直接上代碼。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width_=device-width"> <title>BFC和外邊距合併的理解練習</title> <style> * { margin: 0; padding: 0; } body { background: pink; } .box1 { background: yellow; //border: 3px solid red;/*------------------以下為生成BFC，阻止box1和p1外邊距合併的若干方法-----------*/ //position: absolute; //position: fixed; //float: left; //overflow: hidden; //display: flex; //display: inline-flex; display: inline-block; } .p1 { background: #fff; opacity: 0.8; margin: 50px 0; } </style></head><body> <div class="box1"> <p class="p1">p1</p> </div></body></html>

這就樣，BFC生成了，準確地講，是box1擁有了BFC的特性，它和HTML一樣，沒有辦法再去合併子元素的外邊距了。

BFC難道不是暴風城的縮寫嗎？=。=

第一次去暴風城是怎樣的體驗？www.zhihu.com