據w3c文檔瞭解BFC及應用學習總結

首先回顧一下普通流，普通流對後面進一步瞭解BFC有很大的做用

普通流（Normal Flow）

普通流是網頁中元素的默認排版，默認狀況下
塊級元素：以block flow direction排列（每個塊級元素新起一行，即以從上往下以列排列）
行內元素：不會另起一行，一個接一個排布，直到空間不足

脫離普通流

CSS有如下幾種方法使元素脫離普通流

float

float可以使元素向某一方向偏移，直接看demo

<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">粉色透明div向左float</div>
	<div style="background-color: lightblue; width: 400px; height: 400px;">
		<div style="background-color: yellow; width: 50px; height: 50px;">本該在黃色div中的文字環繞粉色div</div>
		普通流淺藍色DIV，與粉色div爲兄弟元素，且包含黃色子div
	</div>
複製代碼

爲方便看出浮動元素脫離普通流遮蓋效果，我給粉色div加了透明度，能夠直接看出其覆蓋了藍色div中的黃色div，同時由於文字會環繞浮動div，故黃色div的文字置於了粉色div下方
（float的原本用處是爲了實現文字環繞）

absolute與fixed

這兩種狀況相對浮動更易於理解，本身動手實驗就好啦

display:none

會使dom節點不在渲染樹中，再也不有分配空間

BFC

簡介

先看下FC，即Formatting Context（格式化上下文），是W3C CSS2.1中的一個概念，指頁面的一塊渲染區域，有對應的渲染規則（BFC與IFC），決定子元素如何定位，及和其餘元素之間的關係和相互影響

而BFC即Block Formatting Contexts，觸發BFC特性的元素會有如下影響：

1. 一個BFC下，block子元素會垂直排列，且垂直方向上會發生margin合併
2. BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素）

內容自W3C BFC

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

結合上述兩點，各個blog上有這樣的總結：

BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。因此，避免margin穿透啊，清除浮動什麼的也好理解了。（摘自[張鑫旭blog](www.zhangxinxu.com/wordpress/2…

什麼狀況下會觸發BFC呢，主要有如下幾種狀況

• 根元素，即HTML標籤
• 浮動元素：float值爲left、right
• overflow值不爲 visible，爲 auto、scroll、hidden
• display值爲 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 定位元素：position值爲 absolute、fixed

tips：W3C文檔描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

應用

BFC有不少方面應用，瞭解BFC特色後，不少操做也知道原理了

避免margin合併(margin collapse)

同一個BFC下，可見margin發生合併：

<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
	<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
複製代碼

不一樣BFC下，margin未發生合併：

<div style="overflow: hidden;">
	<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
</div>

<div style="overflow: hidden;">
	<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>	
</div>
複製代碼

包含浮動元素（清除浮動）

這只是清除浮動的一種方式而已，並且也有一些侷限性，但作個例子說明BFC的應用

未清除浮動：

<div style="border: 1px solid black;">
	<div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
</div>
複製代碼

觸發BFC清除浮動：

<div style="border: 1px solid black;overflow: hidden;">
	<div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
</div>
複製代碼

使用浮動需謹慎！

去除覆蓋效果

<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">粉色透明div向左float</div>
	<div style="background-color: lightblue; width: 400px; height: 400px;">
	普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與粉色    div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;
</div>
複製代碼

顯示以下

可是觸發淺藍色的div以後

overflow: hidden;
複製代碼

此時文字信息爲 匿名塊框,因此原理仍是BFC的第二個特色：BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素）

自適應佈局

結合上述的去除覆蓋效果與div默認的width:auto能夠實現自適應佈局，可是也有不少侷限性，好比overflow:hidden不少場景不適合使用等等

總結

知道原理可讓人少犯某些頁面的佈局錯誤
內容有不妥之處請大佬指出
float使用需謹慎！

參考資料

Normal Flow——MDN
CSS深刻理解流體特性和BFC特性下多欄自適應佈局
W3C BFC
10 分鐘理解 BFC 原理
CSS 匿名文本和匿名框