BFC是什么
BFC全稱Block Formatting Context，也叫塊級格式化上下文，是一種塊盒子如何布局顯示概念。它是頁面中的一塊獨(dú)立渲染區(qū)域，并且有一套渲染規(guī)則規(guī)定內(nèi)部塊級盒子如何布局。這塊區(qū)域與區(qū)域外部不會(huì)相互影響。
如何生成BFC
- 根元素或其它包含它的元素；
- 浮動(dòng) (元素的float不為none)；
- 絕對定位元素 (元素的position為absolute或fixed)；
- 行內(nèi)塊inline-blocks(元素的 display: inline-block)；
- 表格單元格(元素的display: table-cell)；
- overflow的值不為visible的元素；
- 彈性盒 flex boxes (元素的display: flex或inline-flex)；
最常見的是overflow:hidden、float:left/right、position:absolute。
