BFC

1、BFC的概念

Block Formatting Context,块级格式化上下文。可以理解成一个独立的容器,与外界互不相干,互不打扰。

2、BFC的特点

(1)、相邻块级,垂直方向上的边距重叠

(2)、BFC区域不会与浮动元素重叠(清楚文字环绕)

(3)、BFC的独立性,里外互不影响

(4)、BFC块内的浮动元素会参与高度计算(无高度塌陷)

3、创建BFC的方法

(1)、设置float不为none

(2)、设置overflow不为none

(3)、设置display为inline-block,table-cell,table-caption

(4)、设置position不为static或者relative

4、BFC的应用场景

(1)、清除文字环绕

(2)、解决外边距重合

(4)、解决与浮动元素重叠(常见两栏布局,右边自适应,三栏布局中间自适应)

(5)、解决高度塌陷,即浮动子元素参与高度计算。

你可能感兴趣的:(BFC)