BFC塊級格式上下文詳解

1、bfc塊級格式上下文詳解1.bfc簡要定義bfc(block formatting context)直譯為"塊級格式化上下文"。它是一個自立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是打算塊盒子的布局及浮動互相影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。2.bfc創(chuàng)建方式根元素或其它包含它的元素；浮動 (元素的float不為none)；肯定定位元素 (元素的position為absolute或fixed)；行內(nèi)塊inline-blocks(元素的 display: inline-block)；表格單元格(元素的display: table-cell，html表格

2、單元格默認(rèn)屬性)；overflow的值不為visible的元素；彈性盒 flex boxes (元素的display: flex或inline-flex)3.bfc內(nèi)部特性內(nèi)部的盒會在垂直方向一個接一個羅列（可以看作bfc中有一個的常規(guī)流）；處于同一個bfc中的元素互相影響，可能會發(fā)生margin collapse；但不同bfc可以阻擋margin collapse每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；bfc就是頁面上的一個隔離的自立容器，容器里面的子元素不會影響到外面的元素，反之亦然；計算bfc

3、的高度時，考慮bfc所包含的全部元素，連浮動元素也參加計算；浮動盒區(qū)域不疊加到bfc上；實戰(zhàn)操作代碼解析，更多web前端實戰(zhàn)操作，學(xué)習(xí)指導(dǎo)，學(xué)習(xí)資源，點：前端技術(shù)共享4.bfc應(yīng)用實例1.bfc清除浮動將父元素設(shè)置一個能讓其變?yōu)閎fc區(qū)域的屬性，不如overflow：autotitleonebackground:green;width: 100px;height: 50px;float: left;twobackground: red;width: 200px;height: 50px;float: left;boxborder: 2px solid salmon;width: 400px;o

4、verflow: auto;onetwo2.bfc處理margin collapse在css中，兩個或多個毗鄰的一般流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會發(fā)生疊加，這種形成的外邊距稱之為外邊距疊加。這里講解父子元素，兄弟元素同理。title*margin: 0;padding: 0;ppadding: 0;margin: 20px 0 20px 0;height: 20px;background-color: burlywood;color: fff;divoverflow: auto;/前后的區(qū)分取決于這句話，加上就能讓父級生成bfc區(qū)域包含它們width: 250px