BFC
首先BFC的英文全稱(chēng)Block Format Context，也就是塊級(jí)格式化上下文。
BFC特性
首先，我們大家都知道的BFC特性：
- 內(nèi)部的元素會(huì)在垂直方向借笙，從頂部一個(gè)接一個(gè)的放置
- Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊较锡。
- 每個(gè)元素的margin box的左邊业稼，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)蚂蕴。即使存在浮動(dòng)也是如此低散；
-
BFC的區(qū)域不會(huì)與float box重疊俯邓。 - BFC就是頁(yè)面一個(gè)獨(dú)立的容器，容器里面的元素不會(huì)影響到外面的元素熔号，反之亦然稽鞭。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算
創(chuàng)建BFC方法
下面也是大家都熟悉的創(chuàng)建BFC的方法
- 根元素
- float不為none
- overflow不為visible
- display為
table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一個(gè)為專(zhuān)門(mén)創(chuàng)建BFC的屬性 - position為
absolute,fixed
實(shí)例
實(shí)例1
從實(shí)例1可以看到特性1引镊，內(nèi)部元素會(huì)從頂部一個(gè)接一個(gè)的放置朦蕴，并且屬于同一個(gè)BFC的兩個(gè)相鄰的margin會(huì)發(fā)生重疊。如何解決邊距重疊的問(wèn)題呢弟头？此時(shí)我們需要給元素套上一個(gè)父元素吩抓，將父元素變成BFC。
這樣便可以解決邊距重疊問(wèn)題赴恨。
實(shí)例2
從實(shí)例2上可以看到疹娶，元素的外邊距會(huì)觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動(dòng)元素發(fā)生了重疊。
當(dāng)右面元素觸發(fā)BFC的時(shí)候颈娜，不會(huì)與左面元素發(fā)生重疊，見(jiàn)實(shí)例
實(shí)例3
當(dāng)兩個(gè)子元素都進(jìn)行浮動(dòng)時(shí)沛膳，此時(shí)父元素的高度會(huì)消失扔枫，第六個(gè)特性汛聚，計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算短荐，此時(shí)我們觸發(fā)父元素的BFC倚舀。實(shí)例
此時(shí)發(fā)現(xiàn)高度會(huì)重新被撐開(kāi)，所以計(jì)算BFC的高度浮動(dòng)元素也會(huì)參與計(jì)算
