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

vspiders 發布于2019-08-02 11:24 / 1564人閱讀

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

什么是BFC（Block Formatting Context）

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

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

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

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

body 根元素；

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

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

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

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

BFC到底有什么卵用呢？

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

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

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

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

  

  
    
 

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

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

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

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

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

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

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

References

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

GPU云服務器云服務器忽略css特性關于物聯網的應用云計算和大數據的理解阿里云服務器里的應用在哪里看

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52969.html

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

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

shixinzhang 2019-08-29 16:34 評論0 收藏0
BFC原理詳解

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

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

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

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

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

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

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

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