浮动布局仍可用是因为解决图文环绕和ie8+多栏兼容两大刚需；高度塌陷是脱离文档流的必然结果；伪元素清除法最通用，现代首选display: flow-root；应避免混用不同高浮动块，新项目宜用flexbox或grid替代。
浮动布局为什么还能用？——图文环绕和多栏兼容性是硬需求
浮动没被淘汰，是因为它解决两个真实问题：文字自动环绕图片、老项目多栏布局兼容 IE8+。比如新闻页里一张左浮的缩略图，后面 <p> 里的文字会自然绕排，不用 JS 计算行高；又比如后台系统仍需支持 IE11，float: left 配合固定宽度仍是比 display: inline-block 更稳的横向排列方案——它不因 HTML 换行符或空格产生 4px 间隙。
高度塌陷不是 bug，是脱离文档流的必然结果
父容器高度变成 0，根本原因是浮动元素“脱标”后，父容器计算高度时直接忽略它们。这不是清除浮动没做对，而是机制本身如此。常见错误现象包括：背景色消失、边框看不见、后续兄弟元素上移遮挡内容。
- 别给父容器硬写
height—— 内容变长就溢出 -
overflow: hidden能触发 BFC 包含浮动，但会意外裁剪position: absolute的子元素 - 伪元素清除法
::after { content: ""; display: block; clear: both; }最通用，但记得给父容器设zoom: 1兼容 IE6–7 - 现代首选
display: flow-root，语义清晰、无副作用，但不支持 IE
“卡住”和 DOM 顺序耦合，是维护时最头疼的点
当左侧一个高 div 和右侧一个矮 div 同时 float: left，第三行的浮动元素会被左边那个“拦腰截断”，卡在中间留白——这叫“float drop”。更隐蔽的问题是结构依赖：右浮动元素必须写在 HTML 前面，否则会掉到下一行，导致视觉和逻辑错位。
- 避免混用不同高度的浮动块做栅格，改用
flex或grid - 右浮动组件（如侧边栏）务必放在主内容前，否则清浮动也救不了布局
- 浮动 +
margin很容易引发双倍边距（IE6），要加display: inline
什么时候该果断放弃浮动？
新项目做整体布局、需要垂直居中、等分布局、响应式重排，或者子元素高度动态变化频繁——这时候还用浮动，就是在用胶带修发动机。它本质是“借位取巧”，不是布局模型。
立即学习“前端免费学习笔记（深入）”；
- Flexbox 替代导航栏、卡片列表：
display: flex一行代码解决对齐与换行 - Grid 替代多栏文章页：
grid-template-columns直接定义列宽，无需浮动+清除 - 图文环绕若只需现代浏览器，
shape-outside比浮动更精细（比如绕椭圆排版）
真正该保留浮动的场景只剩两个：兼容极旧系统、或微调某一段图文混排。其他时候，它只是你还没删干净的历史包袱。
