CSS—BFC学习

什么是BFC（Block formatting context）

BFC（Block formatting context），翻译过来为“块级格式化上下文”。

其实BFC就是一个独立的渲染区域，只有块级盒子参与，规定了内部的块级盒子如何布局，并且与这个区域外部没半毛钱关系。

哪些元素具有BFC条件

不是所有的元素都能产生BFC，W3C规定

display属性为block, list-item , table的元素，会产生BFC

什么样的情况可以产生BFC

要给元素添加下列属性就可以产生BFC：

float属性不为none。

position为absolute或fixed。

display为inline-block, table-cell , table-caption , flex , inline-flex。

overflow不为visible。

BFC元素具有的特性

BFC布局特性：

1，盒子从顶端开始垂直地一个接一个地排列。

2，盒子垂直方向的距离由margin决定。属于同一个BFC的相邻两个盒子的margin会发生重叠，会选择其最大的。

3，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。

4，BFC区域不会与浮动的盒子产生交集，而是紧贴浮动边缘。

5，计算BFC高度时，自然也会检测浮动的盒子高度。

BFC的用途

1，清除浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的做法就是在父元素上设置overflow:hidden;样式。

2，解决外边距合并问题

只要加一个Div将其中一个盒子隔离为具有BFC特性就可以避免外边距合并问题

3，制作右侧自适应的盒子问题

BFC区域不会与浮动的盒子产生交集，而是紧贴浮动边缘