就針對BFC的理解

2021-09-27 06:41:12 字數 357 閱讀 3538

bfc是什麼?

首先說一下bfc是什麼,概念從**來?bfc全稱叫做(block formatting context)中文叫塊級格式化上下文,是乙個網頁的概念。網頁是乙個乙個盒子組成的,那麼這個bfc到底有什麼用途呢?看下面具體分析。

怎麼觸發bfc

根元素浮動元素:float 除 none 以外的值

絕對定位元素:position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用:可以解決高度塌陷、margin上下重疊問題、清除浮動

對BFC的理解

bfc塊格式化上下文 block formatting context 是web頁面的視覺化css渲染的一部分,是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的互動限定區域。通俗理解bfc是乙個獨立的布局環境,可以理解為乙個容器,在這個容器中按照一定規則進行物品擺放,並且不會影響其外部元素。...

我理解的BFC

恢復內容開始 what bfc block formatting context 塊及格式化上下文 文件給出的定義很多,自己覺得就是一句話,無論內部子元素怎麼變化,都不會影響外部的元素。表現原則 內部的盒子會在垂直方向,乙個接乙個地放置。盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相...

對BFC的理解

在解釋 bfc 是什麼之前,需要先介紹 box formatting context的概念。box css布局的基本單位 box 是 css 布局的物件和基本單位,直觀點來說,就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性,決定了這個 box 的型別。不同型別的 box,...