理解BFC原理

1.什么是BFC?

• Formatting Context：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

• BFC 即 Block Formatting Contexts 块级格式化上下文，它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

2.形成BFC的条件

满足以下一个条件即可

• body 根元素

• 浮动元素：float 除 none 以外的值

• 绝对定位元素：position (absolute、fixed)

• display 为 inline-block、table-cells、flex

• overflow 除了 visible 以外的值 (hidden、auto、scroll)

• MDN文档上还有其他几个

3.BFC一些的用途

• 不产生边距重叠

• 消除高度塌陷

• 不与float box重叠

具体可以查看我写的一个 demo

---

参考文章

1.我对BFC的理解

2.10分钟理解BFC

3.MDN