BFC机制

一、什么是BFC机制

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

二、触发 BFC机制 的条件

1、当添加了float属性，且float不为none时 2、添加定位，position值为absolute或fixed 3、将元素强制转换类型（display：inline-block，table-cell，table-caption） 4、有根元素或者存在父元素，或其他包含元素 5、块级元素添加overflow属性，且属性不能为visibility 【注】：浮动元素不会影响BFC的页面布局，且在清除浮动时只能将BFC前面的浮动元素清除掉。

三、BFC的布局规则

1、内部的块级元素在垂直方向上一个接一个的放置 2、块级元素垂直方向的margin会重叠，最大值覆盖最小值（两个相邻的元素） 3、每个元素的margin box的左边与包含块的border box左边接触（就算是浮动也是如此） 4、BFC区域不会与float重叠 5、BFC是一个独立的区域（容器），容器内的子元素不会影响外面的元素 6、计算BFC高度是，浮动元素也要加在里面 7、只应用与BFC的子级元素，对产生BFC的元素不适用

四、应用场景

1、自适应两栏布局

.div-left{ width：100px； height：100px； background：skybule； float：left； } .div-right{ background：pink； height：100px； overflow：hidden； margin-left：120px；/*margin为左边宽度+想要设置margin*/ }

2、阻止margin重叠（使用padding或在其中一个元素加父元素并并使他成为一个BFC）

.box{ width：400px； height：400px； background：blue； overflow：hidden；/*使父元素形成BFC*/ } .div{ width：100px； height：100px； background：red； margin：20px； }

效果如下图： 3、可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)

.box{ background：red； overflow：hidden； } .box li{ width：100px； height：100px； margin：10px； border：1pxsolid#ddd； float：left； display：block; }

效果如下： 可以阻止元素被浮动元素覆盖