bfc，全稱為(block formatting context)。按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。
block formatting contexts翻譯為：塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。
其中塊級元素可以理解為父級元素，內容即是子元素，子元素也為塊元素，其他元素指的是與內容同級別的兄弟元素，相互作用指的是bfc裡的元素與外面的元素不會發生影響。
而觸發bfc的條件是：
1、float的值不為none
2、overflow的值不為visible
3、display的值為table-cell、table-caption和inline-block之一
4、position的值不為static或者releative中任何乙個
1、浮動的元素是不會被父級計算高度
2、非浮動元素會覆蓋浮動元素的位置
3、margin會傳遞給父級
4、兩個相鄰的元素上下margin會重疊
1、浮動的元素會被父級計算高度(父級觸發了bfc)
2、非浮動元素不會覆蓋浮動元素的位置（非浮動元素觸發了bfc）
3、margin不會傳遞給父級（父級觸發了bfc）
4、兩個相鄰的元素上下margin不會重疊（給其中乙個元素新增乙個單獨的父級，然後讓他的父級觸發了bfc）
hello1
helloagain
hello1
helloagain
hello1
helloagain
前端css布局之BFC
哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...
前端學習 布局
1.盒子模型 margin 外邊距 邊界 border 邊框 padding 內邊距 填充 以上屬性又分上下左右四個方向。元素實際佔位尺寸 元素尺寸 padding 邊框寬度 2.最基礎的頁面布局結構 html的三種布局 流動布局 特點 塊狀 block 元素都會在所包含元素內自上而下按順序垂直延伸...
BFC 自適應布局
bfc全稱為block formatting context，塊級上下文結構，具有bfc結構的元素的內部元素不會影響外部元素的布局和結構。bfc可以由以下幾種方式觸發 根元素float不為none overflow不為visible position除relative和static display的...