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特性的元素會有如下影響（我翻譯水平較低，內容來自W3C BFC）：

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

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

BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。因此，避免margin穿透啊，清除浮動什麼的也好理解了。（摘自張鑫旭blog https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout）

什麼狀況下會觸發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下：

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

可見margin發生合併

不一樣BFC下：

<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>

margin不合並

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

這只是清除浮動的一種方式而已，並且也有一些侷限性，但作個例子說明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之上，同時文字環繞

可是觸發淺藍色的div以後

overflow: hidden;

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

自適應佈局

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

小聲逼逼：flex！

總結

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

參考資料

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