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佈局至關重要。