浮动布局要求右浮动元素必须前置，否则因脱离文档流导致错位；左浮动可自然顺序书写，但高度不一致时会卡住；Flex/Grid则解耦结构与样式，提升可维护性。
浮动布局导致DOM结构必须反序写，否则布局错位
右浮动侧边栏如果写在主内容后面，它会掉到下一行——不是视觉错位，是HTML解析顺序直接决定渲染结果。这种“结构依赖”让改版变得危险：换一个模块位置，整行都可能崩。
- 左浮动元素可以按自然顺序写，但右浮动必须前置（比如
.sidebar要放在.main之前） - 伪元素清除法或
display: flow-root都救不了这个逻辑错误 - 团队协作时，新成员很难一眼看出“为什么这个div要写在上面”
浮动元素高度不一致时会“卡住”，且无法用CSS自动修复
当.col-left高200px、.col-right高120px，同时float: left，第三行的浮动块会被左边那个“拦腰截断”，中间留白。这不是bug，是浮动模型的固有行为。
- 没有
align-items: stretch这类控制项，等高列只能靠JS计算或硬设height -
overflow: hidden触发BFC能包住它们，但解决不了视觉上的错行 - 响应式场景下，高度随文字增减动态变化，卡住问题更频繁
模块化布局（Flex/Grid）天然解耦结构与样式
Flexbox里display: flex容器不关心子元素HTML顺序，order属性可随时调整视觉流；Grid用grid-area命名区域，模板定义和DOM结构完全分离。
- 侧边栏从
.main后面移到前面，只要grid-template-areas不变，布局就不变 - 等高列是默认行为，不用清浮动、不用伪元素、不用
min-height补丁 - 媒体查询只需改
grid-template-columns或flex-direction，无需重排HTML
清除浮动本身就在增加维护成本
每个用浮动的容器都要考虑“怎么清”，而不同方案副作用不同：overflow: hidden会裁剪position: absolute子元素，::after要兼容IE6–7加zoom: 1，display: flow-root又不支持IE。
立即学习“前端免费学习笔记（深入）”；
- 老项目里经常看到同一页面混用三种清除方式，只为适配不同子模块
- 新加一个浮动组件，得先查父容器用了哪种清除法，再决定要不要加
clear - 现代CSS中，
flow-root虽好，但一旦要兼容IE11，就得退回伪元素+zoom这套组合拳
