BFC（块级格式化上下文）是CSS中的一个概念，它是页面上一个独立的渲染区域，具有一定的布局规则。BFC可以影响元素的布局、浮动、清除浮动和与其他元素的相互作用。
以下是BFC的一些特性和应用：
-
清除浮动：当一个元素的子元素都是浮动元素时，父元素的高度会塌陷为0，这时可以通过创建一个BFC来清除浮动。可以通过在父元素上设置
overflow: hidden、overflow: auto、display: flow-root等方式触发BFC，使父元素能够包含浮动元素。 -
阻止外边距重叠：在同一个BFC中，相邻的两个垂直方向的外边距会发生重叠。通过创建一个新的BFC，可以阻止外边距的重叠。可以通过设置
overflow: hidden、display: inline-block、float: left/right等方式触发BFC。 -
自适应两栏布局：通过将一个元素设为BFC，可以实现自适应的两栏布局。将左侧栏设置为浮动或绝对定位，右侧栏设置为BFC，可以让右侧栏自适应剩余的空间。
-
避免浮动元素覆盖：在同一个BFC中，浮动元素不会覆盖BFC中的非浮动元素，从而避免布局上的问题。
-
控制元素的内部布局：在一个BFC中，可以通过设置
display: inline-block或display: table-cell等方式，控制子元素的布局方式。
触发BFC的方式有多种，包括设置overflow属性为hidden、auto或scroll、使用float属性、设置position属性为absolute或fixed、使用display属性为inline-block、table-cell、table-caption等。
BFC提供了一种更可靠、更可控的布局方式，可以解决一些常见的布局问题。了解和灵活运用BFC概念，可以帮助我们更好地掌握CSS布局。
