BFC規範

2022-06-23 16:45:14 字數 787 閱讀 7537

bfc規範也叫塊級格式化上下文。是指一個獨立的容器。

我們可以通過一下幾種方式觸發bfc

1.通過浮動觸發：float（除none）

2.通過絕對\固定定位觸發：position:absolute\flxed

3.通過display觸發：display:inline-block\flex\table-cells

4.通過overflow觸發：overflow:hidden\auto\scroll

1、上下塊級元素的margin相疊加的時候。

style:


.box1


.box2


.box


html:
2、解決margin傳遞問題

style:


.box1


.box2


html:
3.解決浮動問題

style:


.box1


.box2


html:
4、解決覆蓋問題

style:


.box1


.box2


html:


154545
可以實現左邊固定，右邊自適應的兩欄佈局。

IFC and BFC

bfc and ifc 1，ifc 針對行內元素 行內格式上下文 bfc 針對塊級元素 塊級格式上下文 2，ifc特點 行框的高度由包含元素...

理解 BFC

bfc 已經是一個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章， 介紹瞭如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止margin 重疊等 。 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。 於是這兩天仔細閱讀了css2 1 s...

BFC總結

1 bfc定義 非學術 bfc是一塊獨立渲染區域，決定了其包裹的子元素的定位方式。 2 bfc形成條件 下列情況將建立一個塊格式化上下文 1...