BFC

BFC

BFC（Block formatting context） 块级格式化上下文
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
BFC功能就是包住里面的东西，即使是浮动的;

触发BFC的方式 | 触发条件：

根元素或者其他包含他的元素
position: absolute/fixed
display: inline-block / table
float 元素 float不是none
ovevflow !== visible
display: flow-root;

规则:
属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

应用:
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

案例

一.爸爸管儿子
子元素浮动，父元素包不住子元素
解决一：让父元素也浮动 float: left;
解决二：让父元素变为绝对定位元素 position: absolute;
解决三：让父元素变为行内块元素 display: inline-block;
解决四.让父元素的overflow不为visible overflow: auto; [宽度不会跟子元素一样]
解决五：以上几种解决办法可能会影响其他属性，比如高度之类的。然后新出了一个是专门触发BFC的 给父元素加display:flow-root (由于是新出的，兼容性差)

二.兄弟之间划清界限
解决一：触发弟弟的BFC，
display: flow-root;
比如加一句overflow:auto
注意：如果两个div没有浮动在一个元素中，他们的竖直margin会合并
如何清除浮动，给父元素一个.clearfix类
.clearfix {
content: “”;
clear: botn;
display: block;
}