1.什麼是bfc
1.1 bfc是塊級格式上下文，是頁面中，盒布局的css渲染模式。
2.bfc的特性：
2.1 bfc內部相鄰的box設定margin會重疊，並且優先使用值最高的margin。
2.2 bfc是乙個獨立的區域，其內部的元素不會印象到外部，外部的元素也不會印象到內部。
2.3 bfc的區域不會與float的區域重疊。
2.4 計算bfc高度時，float區域的高度也會計算在內。
3.bfc形成條件：
3.1 浮動設定：除了float為none之外的所有屬性都可以形成bfc。
3.2 定位設定：position設定為（absolute,fixed）。
3.3 display 為以下其中之一的值 inline-block，table-cell，table-caption。
3.4 overflow除了visible以外的所有值（hidden，auto，scroll）
4.bfc應用場景：
4.1：解決margin重疊
<div
class
="bfc-bk"
>
<
p>1
p>
<
div>
<
p>如果不需要邊距重疊，那麼可以使用乙個父級元素包裹起來，並且使用bfc即可，原理是根據以上第2.2條的特性
p>
div>
<
p>3
p>
<
p>4
p>
div>
.bfc-bk.bfc-bk p.bfc-bk div
4.2 解決布局問題
兩列布局，左側固定高寬，右側自適應<
div
class
="bfc-bj"
>
<
div>使用float進行布局
div>
<
div>使用了float後
如果不把這第二個標籤設定為bfc，那麼當他的高度超過第乙個div時，內容會與第乙個元素重疊
div>
div>
.bfc-bj.bfc-bj div:nth-child(1).bfc-bj div:nth-child(2)
4.3 bfc解決浮動的邊框塌陷問題
<ul class
="bfc-ul"
>
<
li>1
li>
<
li>將父級設定為bfc，頁面渲染其時高度時，會將float區域的高度也計算在內，原理根據以上2.4條的特性
li>
<
li>3
li>
ul>
.bfc-ul.bfc-ul li
注：如有錯誤，請指出，共同學習 ！！！
HTML 中BFC的理解
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們布局的時候就不會出現意外情況了。display 屬性為 block,list item,table 的元素，會產生bfc.給這些元素新增如下屬性就可以觸發bfc...
CSS中的BFC解析
bfc 即塊級格式上下文 block formatting context 它是指乙個獨立的塊級渲染區域，只有block level的box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。css2.1規定滿足一下條件之一就會生成bfc 根元素float的值不為none overf...
CSS中的BFC詳解
一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素 float除none以外的值。2 定位元素 position absoluted,fi...