display: flow-root 是解决浮动导致父容器高度塌陷的最优解，一行代码触发bfc、无副作用、现代浏览器全支持；contain: layout 不处理该问题。
contain: layout 不能包含浮动元素
它压根不处理浮动带来的高度塌陷问题。contain: layout 的作用是告诉浏览器“这个元素的布局变化不会影响外部”，但它不会让父容器重新感知浮动子元素的高度，也不会触发 BFC 来包裹浮动内容。
常见误用场景是：给父容器加了 contain: layout，结果发现高度还是 0，后续内容照样叠上来——这不是写法错了，是它根本没这个职责。
-
contain: layout隔离的是布局计算范围，不是文档流归属 - 浮动元素仍脱离文档流，父容器依然“看不见”它们
- 和
overflow: hidden或display: flow-root的行为完全不同，后者明确通过 BFC 包含浮动，前者完全不干预
哪些 CSS 属性真能包含浮动元素
能真正解决父容器高度塌陷的，只有那些能创建 BFC（块级格式化上下文）的属性。关键看是否满足 CSS 规范中对 BFC 的定义条件。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
display: flow-root：现代首选，语义清晰、无副作用，Chrome 64+/Firefox 59+/Safari 10.1+ 支持 -
overflow: hidden或overflow: auto：有效但危险，可能意外裁剪position: absolute溢出或transform移动后的内容 -
float: left/float: right：自身变成浮动，通常不适用，会把整个容器推出文档流 -
position: absolute/position: fixed：脱离文档流，父容器更包不住子元素了
伪元素 clearfix 还值得用吗
在必须兼容 IE11 及更早版本的老项目里，.clearfix::after 仍是可行方案；但在新项目中，它已明显过时。
- 老式写法
content: ""+display: table+clear: both在 Safari 10.0 之前有渲染 bug - 如果父元素本身用了
content（比如图标字体），::after可能覆盖或干扰原有视觉 - 和
contain: paint或contain: style同时使用时，行为不可预测，调试困难 - 一行
display: flow-root就能替代整段伪元素代码，且无兼容隐患
浮动还没死，但别让它干布局的活
文本环绕图片、旧系统维护、极简内联排版——这些才是 float 合理的使用场景。一旦涉及多列、响应式、对齐控制或嵌套容器高度管理，就该换 Flexbox 或 Grid。
contain: layout 是为性能优化设计的，不是清除浮动的补丁；而 display: flow-root 才是现代清除浮动最干净的解法。容易被忽略的是：很多开发者看到父容器高度塌陷，第一反应是“加个 clear”，却没意识到——问题根源不在清除方式，而在不该用 float 做布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
