BFC的特性及使用场景

Posted 2021-01-02 yinonglee

BFC(Block Formatting Context)块级格式化上下文，是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

 

BFC的特性：

　　1. 属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

　　2. BFC的区域不会与浮动元素的区域重叠

　　3. BFC的高度包含浮动子元素的高度

　　4. BFC在页面上是一个独立的容器，里外的元素不会互相影响

　　5. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

 

创建BFC：

　　1. float值不为none

　　2. position的值不是static或raletive

　　3. display属性 为table table-cell...

　　4. overflow: auto hidden scroll (不为visible)

 

BFC使用场景：

　　1. 去除边距重叠现象

　　2. 清除浮动（让父元素的高度包含子浮动元素）

　　3. 避免某元素被浮动元素覆盖

　　4. 避免多列布局由于宽度计算四舍五入而自动换行