display: flow-root能自动包含浮动子元素并防止父容器塌陷，无需额外标签或副作用大的技巧。通过创建新的BFC，它使容器正常包裹浮动内容，语义清晰且兼容现代浏览器，是当前推荐的清除浮动方案。
在CSS中，当容器内的子元素使用了浮动（float），父容器往往会“塌陷”——也就是无法正确包裹这些浮动元素，导致边框或背景显示不完整。传统解决方法包括使用额外的清除浮动元素（clear: both）或触发BFC（块级格式化上下文）。而现代更推荐的方式是使用 display: flow-root。
什么是 display: flow-root？
display: flow-root 是一种现代CSS属性值，它创建一个块级盒子，并自动建立一个新的块级格式化上下文（BFC），同时其内部内容会正常流动布局。最重要的是：它能自动包含所有内部浮动元素，无需额外标签或复杂技巧。
这个属性的作用类似于以前常用的触发BFC的方法（如 overflow: hidden、float: left 等），但更加语义清晰且副作用更小。
如何使用 display: flow-root 清除浮动
假设你有如下HTML结构：
立即学习“前端免费学习笔记（深入）”；
其中两个子元素分别向左和向右浮动，如果不处理，.container 的高度将为0。
只需给容器添加：
.container {
display: flow-root;
}
此时容器会自动包含两个浮动子元素，边框、背景色等都能正常显示到最底。
与传统方法对比优势明显
- 无需额外HTML标签：不像 clear: both 需要加一个空的 div
- 无副作用：相比 overflow: hidden 可能造成内容被裁剪的问题，flow-root 更安全
- 语义明确：代码意图清晰，一看就知道是为了清除浮动
- 原生支持BFC：现代标准推荐方式，符合未来趋势
兼容性注意事项
目前主流浏览器（Chrome 65+、Firefox 58+、Edge 79+、Safari 11.1+）都已支持 display: flow-root。如果需要支持较老浏览器，可考虑结合传统BFC触发方式作为降级方案：
.clearfix {
display: flow-root;
}
/* 旧浏览器回退 */
@supports not (display: flow-root) {
.clearfix {
overflow: hidden;
}
}
基本上就这些。用 display: flow-root 来清除浮动，简洁、高效、现代，是当前最佳实践之一。
