举例说明BFC有什么应用场景

BFC (Block Formatting Context)，块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC的应用场景主要体现在以下几个方面：

1. 防止margin重叠 (Collapsing Margins): 这是BFC最常见的应用场景。相邻的两个块级元素的垂直margin会发生重叠，取两者中的较大值。如果触发其中一个元素的BFC，就可以避免margin重叠。

   <div style="margin-bottom: 20px;">外层div</div>
   <div style="margin-top: 30px;">内层div</div>
   

   上述代码中，两个div的margin会重叠，最终的margin是30px。为了避免这种情况，可以触发外层或内层div的BFC：

   <div style="margin-bottom: 20px; overflow: hidden;">外层div</div>
   <div style="margin-top: 30px;">内层div</div>
   

   通过overflow: hidden，外层div形成了BFC，阻止了margin重叠，最终margin为20px + 30px = 50px。

2. 清除浮动 (Clear Floats): 父元素高度塌陷是浮动带来的一个常见问题。当子元素设置了浮动后，脱离文档流，父元素无法感知其高度，导致父元素高度为0。通过触发父元素的BFC，可以包含浮动元素，使其高度被父元素正确计算。

   <div style="border: 1px solid black;">
       <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
   </div>
   

   上面的代码中，父元素高度会塌陷。通过触发父元素的BFC：

   <div style="border: 1px solid black; overflow: hidden;">
       <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
   </div>
   

   父元素形成了BFC，包含了浮动元素，高度得以正确计算。

3. 防止文字环绕 (Preventing Text Wrapping): 一个块级元素的内容会环绕在其旁边的浮动元素周围。通过触发块级元素的BFC，可以阻止文字环绕，使其与浮动元素并列。

   <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
   <div style="overflow: hidden;">这是一段文字。</div>
   

   这段文字不会环绕红色浮动元素，而是与其并列排布。

4. 多列布局 (Multi-column Layouts): 结合浮动和BFC，可以实现多列布局，例如两列等高布局。

总而言之，BFC 提供了一种隔离元素的渲染区域，使其内部的布局不受外部元素的影响，同时也不会影响外部元素的布局，在布局中起到重要的作用。 触发BFC的方式有很多，常见的有：

• overflow: hidden;
• float: left; 或 float: right;
• display: inline-block;
• display: table-cell;
• position: absolute;
• position: fixed;

选择哪种方式触发BFC需要根据具体场景而定，overflow: hidden 是最常用的方式，但需要注意其可能会隐藏溢出内容。 其他方式也各有优缺点，需要根据实际情况选择。