「css」BFC-塊級格式化上下文的消化與吸收

、BFC概念

先看官方定義：BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

不愧是官方定義，看起來就不容易進腦子，下次面試被問到還是會撓頭=.=。所以接下來我們先把這個東西拆開來看看，到底是什么神秘力量讓它如此不羈。

1.1 拆分

塊級：即我們常用的塊級元素，eg:div、li、p等

格式化：每種代碼都有自己的展現規則，格式化的作用就是把代碼變美變漂亮，編程人員閱讀起來更舒服。以后臺返回的json為例：

{"success":true,"data":{"userid":"1","name":"Jack","mobile":"123456"},"errorMessage":"成功！","code":1}

格式化以后的數據格式應為：

{
    "success": true,
    "data": {
        "userid": "1",
        "name": "Jack",
        "mobile": "123456"
    },
    "errorMessage": "成功！",
    "code": 1
}

所以對于格式化的定義，可以簡單地概括為根據制定的具體規則，對內容展示做一些處理，從而達成某些規范，或使內容更加美觀合理。

上下文：表示格式化影響的范圍，或者作用域。上例中的上下文即為該特定json代碼段。

綜上所述，我們可以這么理解BFC的概念，在正常的文檔流中：

在滿足一定條件下，一個普通的塊級元素，就會變成一個塊級格式化上下文
在這個上下文范圍內，所有的元素排列都會遵循一定的規則，即格式化的規則，進行排列布局。（且針對不同類型的元素會對應不同的規則）。
這個范圍內的元素不管如何布局都不會影響到上下文外部的元素，也就是一個獨立的布局單位。

1.2 創建BFC

一個普通的塊級元素滿足以下條件中的任意一個即可觸發BFC(參考MDN):

根元素（html）
浮動元素（元素的 float 不是 none）
行內塊元素（元素的 display 為 inline-block）
絕對定位元素（元素的 position 為 absolute 或 fixed）
表格單元格（元素的 display 為 table-cell，HTML表格單元格默認為該值）
表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
overflow 計算值(Computed)不為 visible 的塊元素
多列容器（元素的 column-count 或 column-width (en-US) 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中

二、BFC應用場景

2.1 清除元素浮動

如下例子中，因為父元素未設置高度，并且子元素浮動脫離了文檔流，所以父元素出現高度塌陷問題(子元素無法撐開父元素的高度)，要解決這個問題，我們可以給父元素設置css屬性觸發BFC來解決，方式見1.2創建BFC，通常的做法是設置父元素的overflow為非默認的 visible 的值。

HTML

<div class="box">
    <div class="float fl">左浮動元素</div>
    <div class="float fr">右浮動元素</div>
</div>

CSS

.box {
        background-color: #eee;
        border: 5px solid red;
    }

.float {
  width: 200px;
  height: 150px;
  background-color: white;
  border:3px solid black;
  padding: 10px;
}  
.fl {
  float: left;
} 
.fr {
  float: right;
}

無BFC，高度塌陷

給父元素box添加屬性 overflow: hidden; 觸發BFC后，浮動的子元素也遵守流布局了：

觸發BFC，高度正常

2.2 外邊距合并(重疊)

HTML

<div class="box">
    <div class="item top"></div>
    <div class="item bot"></div>
</div>

CSS

.box {
  	background-color: #eee;
  	border: 5px solid red;
  	overflow: hidden;
}
.item {
  	width: 200px;
  	height: 150px;
  	background: lightblue;
}  
.top {
  	margin-bottom: 50px;
} 
.bot {
  	margin-top: 50px;
}

外間距重疊只有50px

要消除外邊距合并，可以通過給相鄰元素的其中之一，進行一層BFC隔離封裝：

<style>
  .item-box {
      overflow: hidden;
  }
 </style>
<div class="box">
    <div class="item top"></div>
    <div class="item-box">
      <div class="item bot"></div>
    </div>
</div>

外間距正常，為50+50=100px

以上。

. 如何理解CSS盒子模型

標準盒子模型：寬度=內容的寬度（content）+ border + padding

低版本IE盒子模型：寬度=內容寬度（content+border+padding）

2.BFC

1. 如何理解CSS盒子模型標準盒子模型：寬度=內容的寬度（content）+ border + padding低版本IE盒子模型：寬度=內容寬度（content+border+padding）

2.BFC

1）什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。

2）形成 BFC 的條件

* 浮動元素，float 除 none 以外的值

* 定位元素，position（absolute，fixed）

* display 為以下其中之一的值 inline-block，table-cell，table-caption

* overflow 除了 visible 以外的值（hidden，auto，scroll）

3）BFC 的特性

* 內部的 Box 會在垂直方向上一個接一個的放置。

* 垂直方向上的距離由 margin 決定

* bfc 的區域不會與 float 的元素區域重疊。

* 計算 bfc 的高度時，浮動元素也參與計算

* bfc 就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。

3.標簽語義化

代碼結構更加清晰

見名知意，沒有基礎的人也能知道這部分代碼是干嘛的

方便團隊開發維護，代碼可讀性更強

有利于SEO優化，爬蟲依賴于標簽來確定上下文關系

4.meta標簽

meta標簽提供關于html文檔的元數據，不會顯示在頁面，但是對于機器是可讀的，告訴瀏覽器怎么解析頁面，告訴搜索引擎關鍵字（SEO優化）

meta作用：告訴機器瀏覽器該如何解析該頁面，描述這個頁面的主要內容，可以設置服務器發送到瀏覽器的http頭部內容

charset="utf-8"設置頁面使用的字符編碼

viewport 設置視口，移動端的適配

5.css與javascript引入設置script標簽的引入一般放在body最后，這樣避免腳本過大，加載時間長，導致頁面長時間空白，

這是因為渲染進程與js進程是互斥的，腳本會阻塞頁面的渲染，腳本之間的加載是同步進行的，按引入順序執行，但是以下兩個屬性會影響腳本執行與頁面渲染的順序

defer：不會阻塞渲染，這樣即使放在header內部，也不會阻塞頁面加載，不過js會先于document加載完成，并且也不會影響腳本之間的執行順序，按照引入順序執行

async：與defer一樣，都是解決阻塞渲染，但它是在document加載完成后才執行，并且它的執行順序是按照誰先加載完成執行誰，所以對于文件順序有要求，存在前后依賴的不要使用它

6.HTML的塊級元素，行內元素，行內塊元素有哪些,區別是什么

塊級元素：div，h1-h6，p，ul，ol，dl，li，hr，dt，dd，form，table

特性：塊元素獨占一行，寬高生效，默認寬和父元素一樣，內容撐開高度，margin，padding全部生效

行內元素：em，i，del，small，strong，ins，span，a

特性：寬高不生效，左右margin生效上下不生效，在一行排列，大小靠內容撐開，padding都生效

行內塊元素：img，input(表單元素，除去form)

特性：在一行排列，寬高生效，margin，padding生效

7.CSS3有哪些新特性

border-radius圓角

border-image 邊框圖片

border-image: url() top right bottom left

border-width: top right bottom left

box-shadow盒子陰影: x,y,size,opcity

text-shadow文字陰影linear-gradient 線性漸變

background: linear-gradient(to position , color,color,...,color)

radial-gradient 徑向漸變

background: radial-gradient(shap size at position ,

color,color,...,color)

2D/3D轉換 transform：rotate(旋轉) scale(縮放) translate(位移)

@media媒體查詢，根據屏幕寬度，設置，用來解決移動端適配,根據屏幕大小使相應的css生效

flex布局(彈性盒子)

８.實現元素隱藏

display：none 不占位，源碼可見

opacity: 0 占位，源碼可見，透明度0

visibility: hidden 占位，源碼可見

position: top:-9999px,left:-9999px 利用定位將元素移出視窗

9.如何實現元素水平居中

行內元素：text-align：center

塊元素: margin: 0 auto

position: left: 50%; transform: translate(-50%)

10.如何實現元素垂直居中

height=line-height

verticle-align: middle

position: top: 50%; transform: translate(0,-50%)

11.Position

static 默認

relative 相對定位，不脫標，相對于自身位置進行偏離，不影響元素本身特性，z-index提升層級

absolute 絕對定位，脫標，相對于已有定位的父元素進行偏離，都沒有就相對于body進行偏離

fixed 固定定位，脫標，相對于視窗進行偏離

12.定位元素水平垂直居中

寬高固定 position: top:0,left:0,right:0,bottom:0,margin:auto

寬高固定 position：top: 50%, left: 50%, margin-left: -width/2px,margin

top: -height/2px

dispaly: flex; justify-content: center,align-items: center(極力推薦)

position: left: 50%,top: 50%; transform: translate(-50%,-50%)

13.清除浮動

不清楚浮動會發生高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動后，父元素會發生高度塌陷）

* clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式：

{clear:both;height:0;overflow:hidden;}

* 給浮動元素父級設置高度

* 父級同時浮動（需要給父級同級元素添加浮動）

* 父級設置成inline-block，其margin: 0 auto居中方式失效

* 給父級添加overflow:hidden 清除浮動方法

* 萬能清除法 after偽類清浮動（現在主流方法，推薦使用）

.float_div:after{
		 content:".";
 			clear:both;
 			display:block;
       height:0;
 			overflow:hidden;
			 visibility:hidden;
}
.float_div{
			 zoom:1
}

14.css選擇器有哪些，選擇器的優先級

- id選擇器

- 類選擇器

- 屬性選擇器

- 偽類選擇器

- 標簽選擇器

- 偽元素選擇器

- 通配符選擇器優先級：內聯樣式 > ID選擇器(100)> 類選擇器(10)=屬性選擇器=偽類選擇器 > 元素選擇器(1)=關系選擇器=偽元素選擇器 > 通配符選擇器(0)

!important

后代選擇器選全部

子代選擇器只選親孩子

15.各種布局的優缺點

1. float 布局

優點：比較簡單，兼容性也比較好。只要清除浮動做得好，是沒有什么問題的缺點：浮動元素是脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如高度塌陷等。

2. 絕對布局

優點：很快捷，設置很方便，而且也不容易出問題缺點：絕對定位是脫離文檔流的，意味著下面的所有子元素也會脫離文檔流，這就導致了這種方法的有效性和可使用性是比較差的。

3. flex 布局

優點：簡單快捷缺點：不支持 IE8 及以下

4. table布局

優點：實現簡單，代碼少缺點：當其中一個單元格高度超出的時候，兩側的單元格也是會跟著一起變高的，而有時候這種效果不是我們想要的。

5. grid布局

跟 flex 相似。

16.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

**新特性：**

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

拖拽釋放(Drag and drop) API

語義化更好的內容標簽（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage 的數據在瀏覽器關閉后自動刪除

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation

**移除元素：**

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

**h5新標簽兼容：**

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->

**如何區分：**

DOCTYPE聲明\新增的結構元素\功能元素

17. CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個 元素的每個 元素。

p:last-of-type 選擇屬于其父元素的最后 元素的每個 元素。

p:only-of-type 選擇屬于其父元素唯一的 元素的每個 元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個 元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或復選框被選中。

18.解釋盒模型寬高值的計算方式，邊界塌陷，負值作用，box-sizing概念？

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度=邊框 + padding + 內

容寬度； chrom、IE9+、(添加doctype) 使用標準盒模型，寬度=內容寬度。

2. box-sizing : 為了解決標準黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承父盒子模型；

3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合并（塌陷）為單個外邊距（合并后最大的外邊距），這樣的現象稱之為外邊距塌陷。

4. 負值作用：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。

19.如何實現瀏覽器內多個標簽頁之間的通信?

調用localstorge、cookies等本地存儲方式

20.解釋下浮動和它的工作原理？清除浮動的方法

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標簽清除浮動。

這種方法是在所有浮動標簽后面添加一個空標簽定義css clear:both. 弊端就是增加了無意義標簽。

2.使用after偽對象清除浮動

該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；

#parent:after{
		content:".";
		height:0;
		visibility:hidden;
		display:block;
		clear:both;
}

3.設置overflow為hidden或者auto

4.浮動外部元素

SS是web前端中的重要內容，很多初學者在學習CSS時都會遇到各種各樣的問題，今天就給大家分享web前端開發如何理解CSS不懼和塊級格式化上下文。也許你從未聽說過這個術語，但是如果你曾經用 CSS 做過布局，那么你也許知道它是什么。理解什么是 BFC ，它為什么會起作用以及如何創建一個有用的 BFC 可以幫助你理解 CSS 布局是怎樣工作的。

什么是BFC?

最容易明白一個 BFC 表現的是一個浮動的例子。在下面的例子中有一個盒模型，其中包含一張左浮動的圖和一些文字。如果我們有大量的文字，它環繞在浮動的圖像上，則邊框會圍繞著整個區域。

<div class="outer">
<div class="float">I am a floated element.</div>
I am text inside the outer box.
</div>
.outer {
border: 5px dotted rgb(214,129,137);
border-radius: 5px;
width: 450px;
padding: 10px;
margin-bottom: 40px;
}
.float {
padding: 10px;
border: 5px solid rgba(214,129,137,.4);
border-radius: 5px;
background-color: rgba(233,78,119,.4);
color: #fff;
float: left;
width: 200px;
margin: 0 20px 0 0;
}

圖1：文本環繞著浮動元素

如果刪除了一些文本，那么文本就不足以環繞圖像，并且因為圖片浮動脫離了文檔流，邊框就會在圖片下面并且上升到文本的高度。

圖2：沒有足夠的文本，邊框就不能到達浮動元素所期望的高度

這是因為當我們在浮動一個元素時，文本所在的盒模型仍然是固定的高度，而因浮動元素而縮短的空間是文本的行框。這就是為什么背景和邊框會出現在浮動元素的后面。

這里有兩種我們通常修復這種問題的方式。一種是使用清除浮動 clearfix hack[1]，它是通過在文本和圖片下面插入一個元素并且設置清除兩側浮動來起作用的。另一種方式是使用 overflow屬性，使用其他的值來代替默認的 visible 。

.outer {
overflow: auto;
}

圖3：使用 overflow:auto 使盒模型中包含浮動

overflow 屬性起作用的原因是使用任何一個其他值來代替初始值 visible ，從而創建一個BFC。即 BFC 的一個特點就是它包含浮動。

BFC 布局是一個迷你布局

你可以認為 BFC 在網頁中是一個迷你布局。一旦一個元素創建的 BFC ，所有東西都包含在里面了。正如我們所看到的，它包含浮動元素使其不再超出盒子底部。同時 BFC 也產生了一些其他有用的行為。

BFC 防止外邊距塌陷

理解外邊距塌陷是另一個被低估的 CSS 技能。在下一個例子中，有一個灰色背景的 div 。這個 div 中有兩個段落。外層 div 有 40px 的下邊距;每一個段落也分別有 20px 的上下邊距。

.outer {
background-color: #ccc;
margin: 0 0 40px 0;
}
p {
padding: 0;
margin: 20px 0 20px 0;
background-color: rgb(233,78,119);
color: #fff;
}

由于 p 元素的外邊距和外層 div 的外邊距之間沒有任何東西而導致它們折疊，使 p 段落最后會與盒子的頂部和底部平齊。所以在 p 段落的上面和下面我們沒有看到任何灰色。

圖4：外邊距塌陷導致在盒子的頂部和底部看不到任何灰色

如果我們對盒模型應用 BFC ，那么它將包括段落和邊距并使之不會塌陷，所以我們將在邊距的后面看到灰色的背景。

.outer {
background-color: #ccc;
margin: 0 0 40px 0;
overflow: auto;
}

圖5：使用BFC外邊距將不會塌陷

BFC 再一次使元素包含在其中，阻止其外邊距塌陷或超出盒模型。

BFC 阻止內容環繞浮動元素

你也會熟悉 BFC 這種行為，就是它如何在使用浮動的多列布局中工作的。如果一個項目創建了 BFC ，那么它將不會環繞任何浮動元素，比如在下面的示例中有這樣的標記：

<div class="outer">
<div class="float">I am a floated element.</div>
<div class="text">I am text</div>
</div>

帶有 float 類的元素開始浮動，然后 div 中的文本會環繞在浮動元素周圍。

圖6：文本環繞浮動元素

那么可以使用通過對文本使用 BFC 來阻止其環繞行為。

.text {
overflow: auto;
}

圖7：div 包含的文本使用了 BFC 使之停止環繞

這是我們創建多列浮動布局常用的方式。浮動一個元素同時也為另一個元素創建了 BFC ，所以當右邊的元素比左邊高時，創建的列也不再嘗試環繞對方。

還有什么方式可以創建 BFC?

除了使用 overflow 屬性以外，其他一些 CSS 屬性也可以創建 BFC 。正如我們看到的，浮動一個元素也創建了 BFC ，所以浮動項目將包含里面的任何元素。

其他方式還有使用 position: absolute ，position: fixed ，使用 display: inline-block ， display: table-cell 及 display: table-caption ，其中 table-cell 以及 table-captions 是 HTML 元素的默認屬性，所以如果有一個 table 數據，那么它的每個格子都將創建 BFC 。 column-span: all 多被使用在多列布局中。

Flex 和 Grid 項目也會創建類似的 BFC ，它們分別被描述為 Flex 格式化上下文和 Grid 格式化上下文，這分別反映了不同的布局類型。 BFC 表示塊級布局， FFC 代表 Flex 布局。在實際項目中結果是一樣的，都是包含浮動并且外邊距不會發生塌陷。

創建 BFC 新方式

使用 overflow 屬性或其他方式創建 BFC 有兩個問題。第一，這些方法對于它們真正的用途會產生副作用。使用 overflow 屬性創建一個 BFC 并且包含浮動，但是在某些情況下你可能會發現得到一個了不必要的滾動條，或者陰影被剪掉了。這是由于 overflow 屬性本質上是告訴瀏覽器在溢出的情況下應該怎樣做—產生滾動條或者剪掉元素。瀏覽器實際上做了你讓它做的工作!

即使在沒有任何副作用的情況下，使用 overflow 屬性也可能會讓另一個開發人員感到困惑。為什么 overflow 屬性設置為自動或滾動?開發者最初的目的是什么?他們希望在這個組件上使用滾動條嗎?怎樣創建一個 BFC 是行之有效的?應該是沒有造成其他行為而創造出迷你的布局，或者保證是在安全范圍內的，它將不會引發任何意想不到的問題，并且開發人員的意圖也很清晰。

CSS 工作組認為有一個很方便的新的 display 屬性: flow-root 。

你可以在任何情況下使用 display: flow-root ，它將會創建一個新的有用的 BFC ，它包含浮動，阻止外邊距塌陷，并且阻止元素環繞浮動。

你可以在下面的 CodePen 中看到上述所有的這些，如果你的瀏覽器支持 display: flow-root 的話，如目前流行的火狐或谷歌瀏覽器。

圖8：支持 display: flow-root 屬性的瀏覽器

支持這個屬性的瀏覽器是有限的，但如果你認為這將是方便的，你可以去支持它。然而，即使目前你不能夠在你的代碼很流利的使用 flow-root 功能，但你現在明白了 BFC 是什么，以及當你使用 overflow 屬性或其它方法包含浮動的時候你明白了你在做什么。了解這樣一個事實：比如 BFC 將阻止元素環繞浮動，這在不支持的瀏覽器中想創建 Flex 或 Grid 布局的時候都是非常有用的。

你已經了解了一些關于瀏覽器如何布置 Web 頁面的基本原理，這看起來似乎無關緊要，但卻可以加快創建和調試 CSS 布局的時間。關注“武漢千鋒”公眾號，可以獲取更多web前端學習資料。

在線咨詢

上一篇：圖庫網站SEO（搜索引擎優化）案例
下一篇：html的js學習-瀏覽器對象模型概念學習

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「css」BFC-塊級格式化上下文的消化與吸收

、BFC概念

二、BFC應用場景

. 如何理解CSS盒子模型

2.BFC

3.標簽語義化

4.meta標簽

5.css與javascript引入設置script標簽的引入一般放在body最后，這樣避免腳本過大，加載時間長，導致頁面長時間空白，

6.HTML的塊級元素，行內元素，行內塊元素有哪些,區別是什么

7.CSS3有哪些新特性

８.實現元素隱藏

9.如何實現元素水平居中

10.如何實現元素垂直居中

11.Position

12.定位元素水平垂直居中

13.清除浮動

14.css選擇器有哪些，選擇器的優先級

15.各種布局的優缺點

16.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

17. CSS3新增偽類舉例：

18.解釋盒模型寬高值的計算方式，邊界塌陷，負值作用，box-sizing概念？

19.如何實現瀏覽器內多個標簽頁之間的通信?

20.解釋下浮動和它的工作原理？清除浮動的方法

您的項目需求