float 会导致父容器高度塌陷，因其使元素脱离文档流；修复需清除浮动，如伪元素 clearfix；它不支持等高列且响应式中易失控，现代布局应优先使用 Flexbox 或 Grid。
float 会导致父容器高度塌陷，必须主动清除浮动
浮动元素脱离文档流，父容器无法感知其高度，表现为内容“消失”或后续元素上移。这不是 bug，是 float 的原始设计行为——它本就为文字环绕图片服务。
常见错误是只给子元素加 float: left，却忘记处理父容器。修复方式有三：
- 在父容器末尾添加一个空元素并设置
clear: both - 给父容器设置
overflow: hidden（或auto），触发 BFC，但要注意可能截断绝对定位子元素或隐藏阴影 - 使用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加
class="clearfix"
float 布局不支持等高列，多列高度不一致时视觉割裂明显
当左右两栏内容长度差异大，比如左栏 2 行文字、右栏 10 行列表，float 无法让它们底部对齐。这在卡片式布局或双栏新闻页中特别碍眼。
原因在于 float 元素彼此独立计算高度，没有协同机制。若强行用 margin/padding 模拟等高，维护成本极高，且响应式下极易失效。
立即学习“前端免费学习笔记（深入）”；
替代思路：
- 纯 CSS 方案：改用
display: flex，父容器设display: flex，子项自动等高 - 兼容老浏览器（IE9–）：仍用 float，但配合 JavaScript 动态读取最高列高度再赋值给其余列（不推荐，性能差）
- 放弃等高需求：接受自然高度，用 border 或背景色弱化视觉落差
float 在响应式断点中极易失控，媒体查询需额外重置
比如桌面端用 float: left 实现三栏，到移动端想变单列，仅靠 width: 100% 不够——float 仍在生效，元素可能错位或溢出。
