BFC 生成 特性 解决的问题

Posted 2020-12-17 ximenchuifa

 

BFC( 块级格式化上下文 )

 

块级格式化上下文，它是指一个独立的块级渲染区域，

 

只有 Block­level BOX 参与，该区域拥有一套 

 

渲染规则来约束块级盒子的布局，且与区域外部无关.

 

如何生成BFC

1、根标签 

2、float 的值不为 none 

3、 overflow 的值不为 visible  

4、display 的值为 inline­block ,table-cell,table-caption

5、position 的值为 absolute 或 fixed

 

 

 

BFC 的特性

 

1.内部的标签会在垂直方向上一个接一个的放置 

 

2.垂直方向上的距离由 margin 决定，属于同一个 BFC

 

的两个相邻标签的 margin 会发生重叠 

 

3.每个标签的左外边距与包含块的左边界相接触（从左

 

向右），即使浮动标签也是如此。 

 

4.BFC 的区域不会与 float 的标签区域重叠 

 

5.计算 BFC 的高度时，浮动子标签也参与计算 

 

6.BFC 就是页面上的一个隔离的独立容器，容器里面的