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的包裹容器。
塊級格式化上下文
html文件中元素的定位有3種方式 普通流 絕對定位 浮動 除普通流以外,浮動與絕對定位都會導致元素脫離普通流,按照各自的方式進行定位。帶有bfc屬性的容器屬於普通流的一種。塊格式化上下文是頁面 css 視覺渲染的一部分。它是用於決定塊盒子的布局及浮動相互影響範圍的乙個區域。bfc是元素在擁有某些特...
塊級格式化上下文(BFC)
最近遇到乙個專業的名詞,不是很懂,所以了解了一下,並總結歸納一下。首先清楚我們的問題是什麼?bfc是什麼?怎麼建立?什麼情況下建立?有什麼特性和作用?bfc 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1,浮動元素,float 除 none 以外的值 2,絕對定位元素,p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範,是頁面中的一塊渲染區域並且有自己獨有的渲染規則,決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...