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...