BFC:什么是BFC？BFC作用？如何触发BFC？BFC应用场景

一、什么是BFC？

BFC(块级格式化上下文，Block Formatting Context)是CSS中一种非常重要的布局概念，是一个独立的渲染区域，使其内部的布局不受外部元素影响。了解BFC有助于解决浮动、清除浮动、边距重叠等常见布局问题

二、BFC的作用

1、清除浮动:

当父元素包含浮动子元素时，父元素可能因高度塌陷无法正确包裹子元素。通过触发BFC（如设置 overflow:hidden ),父元素会包含浮动元素，从而解决高度坍塌问题

2、阻止外边距折叠:

在同一BFC中，相邻块级元素的垂直外边距会发生重叠(margin塌陷)。将元素放入不同BFC中可避免此问题，例如通过设置 overflow:hidden 或 display:inline-block

3、防止浮动元素覆盖:

浮动元素可能覆盖正常流中的块级元素。为被覆盖元素创建BFC(如设置 position:absolute overflow:hidden ),可使其与浮动元素互不干扰

4、处理多栏布局