對BFC的理解

2022-08-21 01:57:12 字數 3605 閱讀 3055

** 

在解釋 bfc 是什麼之前,需要先介紹 box、formatting context的概念。

box: css布局的基本單位

box 是 css 布局的物件和基本單位, 直觀點來說,就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性,決定了這個 box 的型別。 不同型別的 box, 會參與不同的 formatting context(乙個決定如何渲染文件的容器),因此box內的元素會以不同的方式渲染。讓我們看看有哪些盒子:

formatting context

formatting context 是 w3c css2.1 規範中的乙個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。最常見的 formatting context 有 block fomatting context (簡稱bfc)和 inline formatting context (簡稱ifc)。

css2.1 中只有bfcifc,css3中還增加了gfcffc。

bfc 定義

bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域,只有block-level box參與, 它規定了內部的block-level box如何布局,並且與這個區域外部毫不相干。

bfc布局規則:

內部的box會在垂直方向,乙個接乙個地放置。

box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊

每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。

bfc的區域不會與float box重疊。

bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

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

根元素float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

1. 自適應兩欄布局

**:123

4567

891011

1213

1415

1617

1819

2021

22

頁面:根據bfc布局規則第3條:

每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。

因此,雖然存在浮動的元素aslide,但main的左邊依然會與包含塊的左邊相接觸。

根據bfc布局規則第四條:

bfc的區域不會與float box重疊。

我們可以通過通過觸發main生成bfc, 來實現自適應兩欄布局。12

3.main

當觸發main生成bfc後,這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度,和aside的寬度,自動變窄。效果如下:

2. 清除內部浮動

**:123

4567

891011

1213

1415

1617

1819

頁面:

根據bfc布局規則第六條:

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

為達到清除內部浮動,我們可以觸發par生成bfc,那麼par在計算高度時,par內部的浮動元素child也會參與計算。

**:123

.par

效果如下:

3. 防止垂直 margin 重疊

**:123

4567

891011

1213

14

haha

hehe

頁面:

兩個p之間的距離為100px,傳送了margin重疊。

根據bfc布局規則第二條:

box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊

我們可以在p外面包裹一層容器,並觸發該容器生成乙個bfc。那麼兩個p便不屬於同乙個bfc,就不會發生margin重疊了。

**:123

4567

891011

1213

1415

1617

1819

haha

hehe

效果如下:

對BFC的理解

bfc塊格式化上下文 block formatting context 是web頁面的視覺化css渲染的一部分,是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的互動限定區域。通俗理解bfc是乙個獨立的布局環境,可以理解為乙個容器,在這個容器中按照一定規則進行物品擺放,並且不會影響其外部元素。...

我理解的BFC

恢復內容開始 what bfc block formatting context 塊及格式化上下文 文件給出的定義很多,自己覺得就是一句話,無論內部子元素怎麼變化,都不會影響外部的元素。表現原則 內部的盒子會在垂直方向,乙個接乙個地放置。盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相...

就針對BFC的理解

bfc是什麼?首先說一下bfc是什麼,概念從 來?bfc全稱叫做 block formatting context 中文叫塊級格式化上下文,是乙個網頁的概念。網頁是乙個乙個盒子組成的,那麼這個bfc到底有什麼用途呢?看下面具體分析。怎麼觸發bfc 根元素浮動元素 float 除 none 以外的值 ...