在普通流中的盒子會(huì)參與一種格式上下文，這個(gè)盒子可能是塊盒也可能是行內(nèi)盒，但不可能同時(shí)是塊盒又是行內(nèi)盒。塊級(jí)盒參與塊級(jí)格式上下文(BFC)，行內(nèi)級(jí)盒參與行級(jí)格式上下文(IFC)。
BFC的形成
浮動(dòng),絕對(duì)定位元素,和display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個(gè)值已經(jīng)被傳播到視口),以及當(dāng)overflow不為visible的塊盒才會(huì)為它的內(nèi)容創(chuàng)建新的BFC。
為了看得更清晰,梳理如下
- float 的值不為 none
- position 的值不為 static 或 relative
- display 的值為 table-cell、table-caption、inline-block、flex 或 inline-flex
- overflow 的值不為 visibility
BFC的特性
1.在BFC中,盒子都是從它的包含塊的頂部一個(gè)一個(gè)的垂直放置的。兩個(gè)相鄰盒子的垂直間距決定于margin屬性。在BFC中,兩個(gè)相鄰塊級(jí)盒子之間垂直方向上的外邊距是會(huì)塌陷的。
2.在BFC中,每個(gè)盒子的左外邊界挨著包含塊的左邊界(對(duì)于從右到左的格式化,則為右邊界互相挨著)。即使是存在浮動(dòng)元素也是如此(即使一個(gè)盒子的行盒是因?yàn)楦?dòng)而收縮了的),除非這個(gè)盒子建立了一個(gè)新的BFC(在某些情況下這個(gè)盒子自身會(huì)因?yàn)楦?dòng)而變窄)。
