BFC介绍

BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"
BFC是格式化上下文，独立的渲染区域，就是规定块元素的布局排版规则.

BFC触发条件

• 根元素html;
• overflow不为visible;
• float不为none；
• position为absolute或fixed;
• display为inline-block、table-cell、flex、table-caption或者inline-flex

BFC的布局规则

1. 上下排列，垂直显示
2. 两个盒子上下的margin会重叠
3. 盒子左边的边框和盒子左边的margin会接触
4. 浮动区域和BFC区域不会重叠
5. 每一个BFC都是一个独立的区域，相互之间不影响
6. 在BFC区域的内容，浮动元素也参与高度计算

BFC运用

• 解决高度塌陷
• 自适应两栏布局
• margin重叠

总结

BFC就相当于页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素