CSS中的BFC

BFC 

Block Formatting Context 格式化上下文

就是符合一些特性的HTML标签。

含义

一个独立的渲染区域或者说是一个隔离的独立容器，容器里面的子元素不会影响到外界元素。

形成条件

1. position 绝对定位元素 absolute fixed

2. float 浮动元素 left right

3. overflow 除了visible以外的值，如hidden，auto,scroll

4. body根元素

5. display需要为下列值的任意一个：

flex, inline-block,  

table-cell

(css的table,用来创建表格和excel单元格)

 table-caption

(此元素会作为一个表格标题来显示，类似于 <caption>。)

 

BFC特性

1. 内部的盒子会在垂直方向上一个接一个放置
2. 垂直方向上的距离由margin决定
3. BFC的区域不会与float的元素区域重叠
4. 计算BFC的高度，浮动元素也参与计算
5. BFC是页面上的一个独立容器，容器里面的子元素不会影响到外界元素。

 

总结一下：

BFC是一个抽象概念，一个容器满足了上述的一些特性就成为了BFC。