關于CSS里BFC特性的理解和應用

shixinzhang 發(fā)布于2019-08-29 16:34 / 3369人閱讀

摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

什么是BFC（Block Formatting Context）

Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

而 Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規(guī)則。具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

BFC的布局規(guī)則如下：
??1. 內(nèi)部的盒子會在垂直方向，一個個地放置；
??2. BFC是頁面上的一個隔離的獨立容器；
??3. 屬于同一個BFC的兩個相鄰Box的上下margin會發(fā)生重疊；
??4. 計算BFC的高度時，浮動元素也參與計算
??5. 每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
??6. BFC的區(qū)域不會與float重疊；

那么如何觸發(fā) BFC呢？只要元素滿足下面任一條件即可觸發(fā) BFC 特性：

body 根元素；

浮動元素：float 不為none的屬性值；

絕對定位元素：position (absolute、fixed)

display為： inline-block、table-cells、flex

overflow 除了visible以外的值 (hidden、auto、scroll)

BFC到底有什么卵用呢？

塊格式化上下文對于定位與清除浮動很重要。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

1、同一個 BFC 下外邊距會發(fā)生折疊
也就是說，兩個相鄰的普通流中的塊元素垂直方向上的 margin會折疊。

這里兩個div的外邊距為100px，而不是200px。之所以發(fā)生外邊距折疊，是因為他們同屬于 body這個根元素。

利用BFC可以消除Margin Collapse
BFC導致了margin collapse，而現(xiàn)在又要用它來解決margin cllapse.但是始終要記住一點：只有當元素在同一個BFC中時，垂直方向上的margin才會clollpase.如果它們屬于不同的BFC，則不會有margin collapse.因此我們可以再建立一個BFC去阻止margin collpase的發(fā)生。

  

  
    
 

.wrap {  
  overflow:hidden; 
} 
.p {  
  width:200px;  
  height:50px;  
  margin:100px 0;  
  background-color:red; 
}

2、 BFC 可以包含浮動的元素（清除浮動）
正常情況下，浮動的元素會脫離普通文檔流，使父元素高度坍塌。即外層的div會無法包含內(nèi)部浮動的div。

但如果我們觸發(fā)外部容器的BFC，根據(jù)BFC規(guī)范中的第4條：計算BFC的高度時，浮動元素也參與計算，那么外部div容器就可以包裹著浮動元素。

3、BFC 可以阻止元素被浮動元素覆蓋/（兩欄布局）

大多數(shù)情況(若沒有特殊設置)，第二個元素有部分被浮動元素所覆蓋，(但是文本信息不會被浮動元素所覆蓋) ，文本將會環(huán)繞浮動元素(如Figure 1)；但有時候這并不是我們期望的，我們想要的是Figure2。
如果想避免元素被覆蓋，可觸第二個元素的 BFC 特性，在第二個元素中加入 overflow: hidden

往往可能大家都會選擇利用margin-left來強行讓p的容器有一個左邊距，而距離恰好為Floated div的寬度，但現(xiàn)在我們可以利用BFC更好的解決這個問題。

這個方法可以用來實現(xiàn)兩列自適應布局，左邊的寬度固定，右邊的內(nèi)容自適應寬度。

References

CSS深入理解流體特性和BFC特性下多欄自適應布局
[理解CSS中的BFC(塊級可視化上下文)[譯])](http://flypursue.com/jekyll/u...
CSS: 潛藏著的BFC

GPU云服務器云服務器忽略css特性關于物聯(lián)網(wǎng)的應用云計算和大數(shù)據(jù)的理解阿里云服務器里的應用在哪里看

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113835.html

關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0
BFC原理詳解

摘要：最常見的有簡稱和簡稱?？梢园阉斫獬墒且粋€獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
JS每日一題: 如何理解CSS中BFC?

摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 20190416期如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 BFC 特性及應用同一個...

lentoo 2019-08-23 16:58 評論0 收藏0
理解 CSS 布局和 BFC

摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內(nèi)的一個迷你布局。理解瀏覽器如何布置網(wǎng)頁是非常基礎的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關于塊格式化上下文(BFC)的。你可能從未聽說過這個術(shù)語，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...

miya 2019-08-30 15:43 評論0 收藏0
深入清除浮動原理

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。關于浮動設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們?nèi)ソ鉀Q。例如最常見的父元素塌陷。如下圖所示：...

freewolf 2019-08-29 15:25 評論0 收藏0