在一个元素中触发了BFC时(比如设置了overflow: hidden
),该元素内部的所有元素都会被分隔成不同的盒子,这些盒子之间互不干扰,也不会与外部元素的盒子重叠。而浮动元素(float)会脱离文档流,造成空隙,这个空隙会导致其他元素被浮动元素覆盖。
举个例子,假如有一个包含了多个元素的父元素,其中包含了一个浮动元素和一个触发了BFC的元素。如果没有BFC的影响,浮动元素会覆盖在触发了BFC的元素上方,因为BFC使得内部的元素盒子与外部的元素盒子分开,不会与外部的元素盒子重叠,因此该情况下会发生浮动元素覆盖在触发了BFC的元素下方的情况。