BFC塊級(jí)格式上下文詳解

1、bfc塊級(jí)格式上下文詳解1.bfc簡(jiǎn)要定義bfc(block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)自立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是打算塊盒子的布局及浮動(dòng)互相影響范圍的一個(gè)區(qū)域，并且與這個(gè)區(qū)域外部毫不相干。2.bfc創(chuàng)建方式根元素或其它包含它的元素；浮動(dò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)部的盒會(huì)在垂直方向一個(gè)接一個(gè)羅列（可以看作bfc中有一個(gè)的常規(guī)流）；處于同一個(gè)bfc中的元素互相影響，可能會(huì)發(fā)生margin collapse；但不同bfc可以阻擋margin collapse每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此；bfc就是頁面上的一個(gè)隔離的自立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然；計(jì)算bfc

3、的高度時(shí)，考慮bfc所包含的全部元素，連浮動(dòng)元素也參加計(jì)算；浮動(dòng)盒區(qū)域不疊加到bfc上；實(shí)戰(zhàn)操作代碼解析，更多web前端實(shí)戰(zhàn)操作，學(xué)習(xí)指導(dǎo)，學(xué)習(xí)資源，點(diǎn)：前端技術(shù)共享4.bfc應(yīng)用實(shí)例1.bfc清除浮動(dòng)將父元素設(shè)置一個(gè)能讓其變?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中，兩個(gè)或多個(gè)毗鄰的一般流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會(huì)發(fā)生疊加，這種形成的外邊距稱之為外邊距疊加。這里講解父子元素，兄弟元素同理。title*margin: 0;padding: 0;ppadding: 0;margin: 20px 0 20px 0;height: 20px;background-color: burlywood;color: fff;divoverflow: auto;/前后的區(qū)分取決于這句話，加上就能讓父級(jí)生成bfc區(qū)域包含它們width: 250px