BFC (块格式化上下文)

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC到底是什么东西

BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。

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

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: table-cell
• display: flex
• 更多查阅文档MDN

BFC的规则

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算

BFC解决了什么问题

1. 清除浮动（Clearing Floats）：

   • 当父元素包含浮动元素时，可能导致父元素的高度塌陷（高度为0）。将父元素设为BFC可以自动包含其所有浮动子元素，从而防止高度塌陷。

2. 边距坍塌（Margin Collapse）：

   • 在普通流中，相邻的垂直边距可能会发生坍塌，取两者中较大的边距值。BFC可以防止垂直相邻边距坍塌，确保边距计算按照预期进行。

3. 自适应两栏布局：

   • BFC能够让元素在其内部形成一个独立的布局环境，使得两栏布局中的一个栏可以独立于另一个栏而自适应高度。

4. 阻止浮动元素被普通流元素覆盖：

   • 在BFC中，浮动元素不会覆盖BFC内部的普通流元素，从而防止一些布局问题。

5. 解决内部元素之间margin传递的问题：

   • 在BFC中，垂直相邻的块级元素的margin不会发生合并（传递），这有助于更精准地控制布局。

6. 避免浮动元素造成的父元素高度塌陷：

   • 当父元素包含浮动元素时，父元素的高度可能会塌陷，导致布局混乱。将父元素设为BFC可以防止这种高度塌陷。

7. 解决绝对定位元素的包裹问题：

   • 在BFC中，绝对定位元素的包含块不会是其最近的非static定位的祖先元素，而是距离其最近的BFC。