BFC

BFC是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,是内外元素的定位不会影响,它属于定位方案的普通流

触发条件

• 根元素
• 浮动元素:float处none以外的值
• 绝对定位元素position
• display为inline-block,table-cells,flex
• overflow除了visibale以外的值

约束规则

• 属于同一个BFC的两个相邻Box垂直排列
• 属于同一个BFC的两个相邻Box的margin会发生重叠
• BFC的区域不会与float的元素重叠
• 计算BFC的高度时,浮动子元素也参与计算
• 文字层不会被浮动层覆盖,会环绕与周围

作用

• 阻止元素被浮动元素覆盖
• 一个正常的文档流的块级元素可能被一个浮动元素覆盖,挤占正常文档流,因此可以设置一个元素的float,display.position或者overflow值等方式触发BFC,以防止被浮动盒子覆盖
• 通过改变包含浮动子元素的父盒子的属性值,触发BFC,依此来包含子元素的浮动盒子
• 阻止相邻元素的margin合并
• 属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠