關於BFC理解

時間 2019-11-17

標籤關於 bfc 理解简体版

原文原文鏈接

BFC(Block Formatting Context，塊格式上下文)是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。對其的理解可以幫你更好的佈局頁面。原文連接請戳這裏javascript

常見的定位方案

在進入BFC話題前，先來捋一下常見的定位方案，定位方案是控制元素的佈局，主要有三種常見的方案：css

普通流(正常文檔流)

在普通流中，元素按照其在HTML的前後位置至上而下佈局，在這個過程當中，行內元素水平排列，直到當行被佔滿而後換行，塊級元素則被渲染爲完整的一個新行，除非另外指定，不然全部元素默認都是流定位。也能夠說，普通流中元素的位置由該元素在HTML文檔中的位置決定。html

額外：⚠️java

HTML中，元素能夠分紅塊級元素（block-level elements）和行內元素（inline-level elements）。具體的解析會另開一篇博文出來說解。git

下面給出普通流的一個例子：github

<body>
	<span>first</span>
	<a href="javascript:;">second</a>
	<div class="demo demo1"></div>
	<div class="demo demo2"></div>
</body>
複製代碼

html,body{
	margin: 0;
	padding: 0;
}
.demo{
	width: 200px;
	height: 200px;
}
.demo1{
	background: red;
}
.demo2{
	background: blue;
}
複製代碼

浮動

在浮動佈局中，元素首先按照普通流的位置出現，而後根據浮動的方向儘量的向左邊或右邊偏移，其效果和印刷排版中的文本環繞類似。以下：網絡

<body>
	<div class="container">
		<div class="left"></div>
		文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容
	</div>
</body>
複製代碼

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 100px;
}
.container{
    border: 1px dotted red;
}
.container .left{
    width: 50px;
    height: 50px;
    background: blue;
    float: left;
}
複製代碼

⚠️爲什會內容環繞呢，而不是跟浮動元素重合呢？frontend

《CSS權威指南》中指出，浮動的目的，最初只能用於圖像，的就是爲了容許其餘內容（如文本）「圍繞」該圖像。然後來的CSS容許浮動任何元素。ide

絕對定位

在絕對定位佈局中，元素會總體脫離普通流（浮動佈局能夠理解成脫離父元素文本流），所以絕對定位不會對其兄弟元素形成影響，而具體的位置由絕對定位的座標決定。佈局

什麼是BFC

Formatting context（格式上下文）是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。

BFC即Block Formatting Content（塊級格式上下文），它屬於上述定位方案的普通流。具備BFC特性的元素能夠看做是**隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且BFC具備普通容器所沒有的一些特性。**後面介紹。

簡單來講，能夠把BFC理解成一個封閉的大箱子，箱子內部的元素不管如何翻江倒海，都不會影響到外部的元素。

觸發BFC的條件

下面的方式會建立塊格式上下文：

根元素或包含根元素的元素，這裏我理解爲body元素
浮動元素（元素的float不是none）
絕對定位元素（元素的position爲absolute或fixed）
行內塊元素（元素的display爲inline-block）
表格單元格（元素的display爲table-cell，html表格單元格默認爲該值）
表格標題（元素的display爲table-caption，html表格標題默認爲該值）
匿名錶格單元格元素（元素的display爲table、table-row、table-row-group、table-header-group、table-footer-group（分別是html table、row、tbody、thead、tfoot的默認屬性）或inline-table）
overflow值不爲visible的塊元素
display值爲flow-root的元素
contain值爲layout、content或strict的元素
彈性元素（display爲flex或inline-flex元素的直接子元素）
網格元素（display爲grid或inline-grip元素的直接子元素）
多列容器（元素的column-count或column-width不爲auto，包括column-count爲1）
column-span爲all的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中

建立了塊格式上下文的元素中的全部內容都會被包含在BFC中。以上的建立方式參考自塊格式化上下文

BFC的特性（做用）

簡單羅列下BFC的特性：

內部的box會在垂直方向，從頂部開始一個接一個地放置
box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰的box的margin會發生疊加，結果值並集
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）。（對於從右到左的格式來講，則觸碰到右邊緣），即便是浮動也是如此。即不會發生margin穿透。
造成了BFC的區域不會與float box重疊（可阻止因浮動元素引起的文字環繞現象）
計算BFC高度時，浮動元素也參與計算（BFC會確切包含浮動的子元素，即閉合浮動）

注意⚠️，對於第五點，本來浮動元素是應該脫離文檔流的，可是BFC中會計算其高度。

BFC的一些應用

實現自適應的兩欄佈局

應用了第四點BFC的區域不會與float box重疊的特性。一邊浮動，另外一邊自適應的部分造成BFC，那麼二者就不會重疊，避免了文字環繞及相似情形。

<body>
	<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
	</div>
</body>
複製代碼

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 50px;
}
.container {
    width: 100%;
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
.right {
    height: 200px;
    background-color: red;
    overflow: hidden; /*把.right這個自適應的box變成BFC，避免與.left box這個有float屬性的元素重疊*/
}
複製代碼

解決父元素高度塌陷

高度塌陷產生的緣由：父元素未設置固定的高度，徹底由子元素高度撐開；當子元素float以後脫離了文檔流，父元素內部就沒有支撐，形成了高度的塌陷。

解決這種問題我上以前的博文中有總結，地址請戳CSS清除浮動。這裏再簡單的說下原理：

也就是用到了BFC的特性五：閉合內部浮動。

<body>
	<div class="container">
	    <div class="left">left</div>
	</div>
</body>
複製代碼

html,body{
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    border: 1px solid red;
    overflow: hidden; /*造成BFC，使其能閉合浮動 box*/
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
複製代碼

margin重疊解決

在正常的文檔流中，在垂直方向上兄弟box的margin會取交集（取最大的顯示），爲神馬會出現這種狀況呢？能夠說是一種bug，也能夠說是一種規範。我比較傾向於後者。

<body>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>
複製代碼

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
複製代碼

上面出現的狀況是BFC的特性三：屬於同一個BFC的兩個相鄰的box的margin會發生疊加，結果值並集。那麼，咱們將他們隔離成不一樣的BFC不久解決問題了嘛。

<body>
    <div class='wrap'>
        <div class="top">top</div>
    </div>
    <div class="bottom">bottom</div>
</body>
複製代碼

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
.wrap{
    overflow: hidden; /*將.top box包含在另一個BFC中隔離開*/
}
複製代碼