BFC块级格式上下文

BFC（Block formatting context）简称块级格式上下文

        是一块独立的渲染区域，只有块级盒子（block-level box）参与，规定块级盒子的布局，与外部区域无关。

产生BFC的条件 ：

              1、 display属性为： block ，table ，list-item  。（有宽高，内外边距，边框）

              2、块级盒子包含其中元素：   float  不为  none ；

                                                overflow 不为visitble 

                                               position：  absolute / fixed

                                               display：inline-block  / table-caption  / table-cell  / flex / inline-flex                        

 

BFC布局规则特性:

      1.在BFC中，盒子从顶端开始垂直地一个接一个地排列

      2盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠（以大的为准）

      3.在BFC中，每一个盒子的左外边缘(margin-left 会触碰到容器的左边缘(orderleft) （图三）

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

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

---

             图三

 

 

 

BFC用处：

1.清除浮动。    （自动检测浮动的盒子高度特性）

 

display的属性除了常用的  block  ，inline-block ，inline ；还有以下：