BFC(Block Format Content)塊級格式上下文
BFC的定義:
BFC就是頁面上的一個隔離的獨(dú)立容器沈贝,容器里面的子元素不會影響到外面的元素尝哆。
BFC的生成:
display: inline-block | table-cell | table-caption;
overflow: hidden | auto | scroll;
position: absolute | fixed;
float: right | left;
BFC的作用:
-
清除浮動
父元素生成BFC可以感知到浮動的子元素佃牛,撐開高度膏孟。
普通元素生成BFC可以感知到浮動元素凉泄,移動位置不被遮擋比勉。 -
解決margin合并問題
處于同一個BFC中的相鄰元素埋同,它們的 margin 會合并州叠,如果我們不想讓 margin 合并,可以給這兩個元素設(shè)置不同的BFC凶赁。