BFC（塊級格式化范圍）

coordinate35 發布于2019-08-30 13:22 / 2951人閱讀

摘要：中文翻譯塊級格式化范圍。解決包含框高度塌陷，防止浮動子元素越界。規范第部分的高度計算規則，在計算生成了的元素的高度時，其浮動子元素應該參與計算。根據第三條，生成的元素不會和在流中的子元素發生空白邊折疊。

BFC(block formatting contexts),中文翻譯塊級格式化范圍。默認產生BFC的元素只有html，默認產生HASLAYOUT=true的元素則不止html。

通過代碼來感受一下BFC到底是用來干什么的（主要根據css對于BFC的一系列規范）
首先是可以產生BFC的方法
1.float的值不為none。
2.overflow的值不為visible。
3.display的值為table-cell, table-caption, inline-block中的任何一個。
4.position的值不為relative和static。
最常用的是overflow:hidden;理由和zoom一樣，這樣一般不會影響到其他屬性。
1.解決包含框高度塌陷，防止浮動子元素越界。

我們可以看到div高度塌陷，浮動元素img超出了div的邊界

CSS2.1 規范第 10.6.3 部分的高度計算規則，在進行普通流中的塊級非替換元素的高度計算時，浮動子元素不參與計算。

CSS2.1 規范第10.6.7部分的高度計算規則，在計算生成了 block formatting context 的元素的高度時，其浮動子元素應該參與計算。

所以我們給box設置overflow:hidden;是其產生BFC從而使其內部的浮動元素參與自生高度的計算

父元素被撐開
2.防止與浮動元素重疊

p元素與浮動img元素發生了重疊
由于BFC本身不會與浮動元素疊加，所以只需讓p元素產生BFC即刻解決重疊問題，所以我們給p元素添加一個overflow:hidden;(當然還可以添加clear:both來清除圖片浮動帶來影響)

3.解決上下相鄰兩個元素外邊距重疊

間距只有20px，而不是希望得到的40px

根據 CSS 2.1 8.3.1 Collapsing margins 第一條，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發生折疊現象。也就是處于同一個BFC中的兩個垂直窗口的margin會重疊。

根據 CSS 2.1 8.3.1 Collapsing margins 第三條，生成 block formatting context 的元素不會和在流中的子元素發生空白邊折疊。所以解決這種問題的辦法是要為兩個容器添加具有BFC的包裹容器。

參考文章：
http://www.cnblogs.com/xinghh...
http://www.cnblogs.com/pigtai...
http://www.cnblogs.com/fsjohn...

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

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

BFC（塊級格式化范圍）

摘要：中文翻譯塊級格式化范圍。解決包含框高度塌陷，防止浮動子元素越界。規范第部分的高度計算規則，在計算生成了的元素的高度時，其浮動子元素應該參與計算。根據第三條，生成的元素不會和在流中的子元素發生空白邊折疊。 BFC(block formatting contexts),中文翻譯塊級格式化范圍。默認產生BFC的元素只有html，默認產生HASLAYOUT=true的元素則不止html。通過...

WilsonLiu95 2019-08-01 16:11 評論0 收藏0
CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0
BFC：塊級格式上下文詳解

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 2.B...

wyk1184 2019-08-02 16:17 評論0 收藏0
BFC：塊級格式上下文詳解

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 2.B...

HelKyle 2019-08-30 10:50 評論0 收藏0