一、bfc理解:
bfc(block formatting context)塊級格式化上下文。我的理解就是他是乙個獨立的大箱子,箱子內屬於自己的一塊區域,與外界無關;
二、如何觸發bfc?(滿足下列任意乙個或多個條件即可)
三、bfc布局規則
四、使用場景
解決margin重疊的問題
(margin重疊,未使用bfc)
(依據 屬於同乙個bfc的相鄰的兩個box的margin 會發生重疊,因此將其改變成兩個bfc)
2、清除浮動(父元素沒有設定高度,子元素浮動時,父元素高度失效)
(未清除的情況)
(清除後;依據 計算bfc高度時浮動元素也會參與其中 )
3、左右兩欄布局,右邊自適應
(使用bfc;依據 bfc 的區域不會與float box重疊,讓右側單獨成為乙個bfc )
看了這個文章之後自己也操練了一下
塊級格式化上下文(BFC)
最近遇到乙個專業的名詞,不是很懂,所以了解了一下,並總結歸納一下。首先清楚我們的問題是什麼?bfc是什麼?怎麼建立?什麼情況下建立?有什麼特性和作用?bfc 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1,浮動元素,float 除 none 以外的值 2,絕對定位元素,p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範,是頁面中的一塊渲染區域並且有自己獨有的渲染規則,決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
塊格式化上下文 block formatting context,bfc 是web頁面的可視css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...