塊格式化上下文BFC的原理和應用

2021-09-26 12:37:24 字數 781 閱讀 1655

塊格式化上下文(block formatting context,bfc) 是web頁面的視覺化css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。

下列方式會建立塊格式化上下文:

bfc的約束規則

top和bottom之間的margin重疊了,只有10px而不是20px;

解決方案為給第二個div再包一層div,設定其overflow屬性,使它們處於不同的bfc:

top

bottom

2. 讓浮動內容與周圍內容等高

浮動元素

未浮動元素

由於浮動,使得浮動元素的高度高於旁邊的元素,解決方式為使父box生成乙個bfc,如下:

浮動元素

未浮動元素

塊格式化上下文 BFC

塊格式化上下文 block formatting context,bfc 是web頁面的可視css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。塊格式化上下文包含建立它的元素內部的所有內容.塊格式化上下文對浮動定位 參見float 與清除浮動 參見clear 都很重要...

塊級格式化上下文(BFC)

最近遇到乙個專業的名詞,不是很懂,所以了解了一下,並總結歸納一下。首先清楚我們的問題是什麼?bfc是什麼?怎麼建立?什麼情況下建立?有什麼特性和作用?bfc 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1,浮動元素,float 除 none 以外的值 2,絕對定位元素,p...

BFC 塊級格式化上下文

bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範,是頁面中的一塊渲染區域並且有自己獨有的渲染規則,決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...