BFC的简单理解

Posted 2021-02-21 ksmercy

BFC，block formatting context，直译为“块级格式化上下文”。

BFC是什么

　　官方解释为：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，让html元素在这个环境中按照一定规则进行布局。

　　简而言之：BFC的目的就是形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局。

如何触发BFC　

• 1、根元素（例如HTML文档的根元素是 html 元素，而属于同一个BFC的两个相邻的Box会发生margin重叠）
• 2、float的值不是 none。
• 3、position的值是 absolute 或者 fixed 。
• 4、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• 5、overflow的值不是visible 。（是 auto、scroll或hidden）

BFC可以解决哪些问题

1.解决浮动元素令父元素高度塌陷的问题。

2.利用BFC避免margin重叠

3.清除浮动

参考原文：https://www.jianshu.com/p/a89bdb9d7761