[分享]css中bfc是什么意思

CSS 中的 BFC（Block Formatting Context）是一种 CSS 盒子模型的渲染方式，它在文档中为盒子提供了一个上下文环境。这个上下文环境影响了盒子的布局表现和其与其他元素的关系...

CSS 中的 BFC（Block Formatting Context）是一种 CSS 盒子模型的渲染方式，它在文档中为盒子提供了一个上下文环境。这个上下文环境影响了盒子的布局表现和其与其他元素的关系。

 /*创建一个新的 BFC*/
   .bfc {
     overflow: auto;
   } 

当元素触发 BFC 时，它创建一个独立的渲染上下文，与文档流中的其他元素互相隔离，使其不会被其他元素影响，同时也不会影响其他元素。

BFC 具有以下表现方式：

• 边距重叠的问题会被解决，即避免了 margin collapsing。
• 清除浮动，如果一个元素的内部有浮动元素，当给这个元素触发 BFC 后，它的高度会被包含浮动元素的高度，从而达到清除浮动效果。
• 内部块级元素的渲染区域不会超出包含块的范围。也就是说，BFC 的元素不会被浮动元素或者定位元素覆盖。

BFC 的触发条件有多种，其中包括：

• float 属性不为 none。
• position 属性为 absolute 或 fixed。
• display 属性为 inline-block、table-cell、table-caption、flex、inline-flex。
• overflow 属性不为 visible。

通过使用 BFC，可以控制元素的排版效果，避免一些常见的 bug，同时还可以提高页面的性能。