一呢撞、常見定位方案
在講 BFC 之前溪厘，我們先來了解一下常見的定位方案，定位方案是控制元素的布局合搅，有三種常見方案:
-
普通流 (normal flow)
在普通流中多搀，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中灾部，行內(nèi)元素水平排列康铭，直到當(dāng)行被占滿然后換行，塊級元素則會被渲染為完整的一個新行赌髓，除非另外指定从藤，否則所有元素默認(rèn)都是普通流定位，也可以說春弥，普通流中元素的位置由該元素在 HTML 文檔中的位置決定呛哟。 -
浮動 (float)
在浮動布局中，元素首先按照普通流的位置出現(xiàn)匿沛，然后根據(jù)浮動的方向盡可能的向左邊或右邊偏移扫责，其效果與印刷排版中的文本環(huán)繞相似。 -
絕對定位 (absolute positioning)
在絕對定位布局中逃呼，元素會整體脫離普通流鳖孤，因此絕對定位元素不會對其兄弟元素造成影響者娱，而元素具體的位置由絕對定位的坐標(biāo)決定。
二苏揣、BFC 概念
Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念黄鳍。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則平匈，它決定了其子元素將如何定位框沟，以及和其他元素的關(guān)系和相互作用。
- 那么 BFC 是什么呢增炭？
BFC 即 Block Formatting Contexts (塊級格式化上下文)忍燥，它屬于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器隙姿，容器里面的元素不會在布局上影響到外面的元素梅垄，并且 BFC 具有普通容器所沒有的一些特性。
通俗一點(diǎn)來講输玷，可以把 BFC 理解為一個封閉的大箱子队丝，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會影響到外部欲鹏。
三机久、觸發(fā) BFC
只要元素滿足下面任一條件即可觸發(fā) BFC 特性：
1、html根元素
2貌虾、浮動的元素（除去float:none）
3吞加、絕對定位的元素
4、overflow不為visible
5尽狠、display為表格布局或者彈性布局
四衔憨、BFC 特性及應(yīng)用
1、同一個 BFC 下外邊距會發(fā)生折疊
2袄膏、BFC 可以包含浮動的元素（清除浮動）---解決浮動元素造成的父元素高度塌陷問題：
3践图、BFC 可以阻止元素被浮動元素覆蓋 ---可實(shí)現(xiàn)左圖右文之類的效果
轉(zhuǎn)自：https://zhuanlan.zhihu.com/p/25321647
