举例说明BFC会与float元素相互覆盖吗？为什么？

BFC（Block Formatting Context，块级格式化上下文）不会与浮动元素相互覆盖，而是会包含浮动元素。BFC会根据浮动元素的尺寸，调整自身的高度和宽度，从而避免覆盖。

这里用几个例子说明：

例1：BFC包含浮动元素

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

在这个例子中，外部div因为设置了overflow: hidden而创建了一个BFC。内部div设置了float: left，成为了浮动元素。尽管内部div浮动了，但外部div（BFC）仍然包含了它，并根据内部div的高度调整了自身的高度，所以可以看到外部div的高度与内部div相同，呈现出一个100px x 100px的黑色边框的方块，其中包含一个红色的正方形。如果外部div没有形成BFC，它的高度会塌陷为0，而红色方块会“溢出”到外部。

例2：没有BFC的情况

<div style="border: 1px solid black;"> <!-- 没有创建BFC -->
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
</div>

这里，外部div没有创建BFC。内部div浮动后，外部div的高度塌陷为0，只能看到一条黑色的横线，而红色的正方形则“溢出”到外部，位于黑色横线的下方。

原因：

BFC的一个重要特性就是它会包含浮动元素。BFC在计算高度时，会考虑内部浮动元素的高度，并将它们包含在自身的布局中。 BFC不会被浮动元素覆盖，反而是将浮动元素“包裹”起来，避免了浮动元素对文档流的影响，防止了高度塌陷等问题。 这就是为什么在布局中经常使用BFC来清除浮动带来的影响。

总结: BFC不会与浮动元素重叠或覆盖。BFC会感知内部的浮动元素，并调整自身的大小以包含它们，从而避免浮动元素对外部布局的影响。 理解这一点对于掌握CSS布局至关重要。