移动端浮动元素背景被切断？检查 display: flow-root 属性
当浮动元素导致父容器背景无法覆盖其下方区域时，应检查父容器是否使用了 display: flow-root 属性。
检查浮动元素是否导致父容器背景缺失
在移动端布局中，如果父容器的背景色没有延伸到浮动元素的下方，通常是因为浮动元素脱离了文档流。根据资料，当元素应用了 float 属性后，其父容器的高度会塌陷，导致背景无法包裹浮动元素。例如，在代码示例中，一个紫色背景的 box 容器包裹着浮动元素，若未正确处理，背景将无法覆盖浮动元素下方区域。
要验证这个问题，可以在浏览器开发者工具中检查父容器的背景色属性。如果发现背景色仅存在于浮动元素上方，且父容器高度小于浮动元素高度，说明发生了高度塌陷。此时需要确认浮动元素是否正确设置了浮动方向，以及父容器是否缺少必要的清除浮动机制。
使用 display: flow-root 属性修复背景覆盖问题
资料指出，使用 display: flow-root 是确保父容器包含浮动元素的最现代方法。该属性会创建一个新的块级格式化上下文，使父容器能够自动扩展以包裹浮动元素，从而解决背景被切断的问题。在代码示例中，只需给父容器类名 box 添加 display: flow-root，即可让背景色延伸至浮动元素下方。
操作时，只需在 CSS 中为父容器添加该属性即可。例如，将 .box { display: flow-root; } 添加到样式表中。完成后，父容器的背景色将自动包裹浮动元素，不再出现背景缺失的情况。这是解决浮动布局中背景覆盖问题的推荐方案。
验证修复后的布局效果
修复后，可以通过视觉检查确认背景是否正确覆盖。打开页面，观察浮动元素下方的背景色是否与父容器背景色一致。如果背景色已经延伸至浮动元素下方，说明修复成功。同时，可以检查父容器的高度是否自动调整以适应浮动元素的高度。
如果背景色仍未覆盖，请检查是否有其他 CSS 规则覆盖了 display: flow-root 属性，或者浮动元素是否设置了负 margin 值导致位置异常。确保没有其他清除浮动的 hack 方法干扰，仅保留 display: flow-root 属性即可。
对比其他清除浮动方法的局限性
资料提到，除了 display: flow-root，还可以使用 overflow 或 clearfix hack 来清除浮动。然而，这些方法可能带来副作用。例如，使用 overflow: auto 或 overflow: hidden 可能会裁剪溢出内容，而 clearfix hack 需要额外的 HTML 结构或复杂的 CSS 规则。
相比之下，display: flow-root 是最简洁且无副作用的解决方案。它不需要修改 HTML 结构，也不会影响其他元素的布局。因此，在移动端开发中，推荐优先使用 display: flow-root 来处理浮动元素的背景覆盖问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。