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 仍在生效，元素可能错位或溢出。
必须显式覆盖 float 行为：
- 在移动断点中统一设置
float: none - 同时重置
width、margin等依赖 float 的样式 - 避免用
!important强制覆盖，优先靠选择器权重或更具体的媒体查询顺序
一个典型漏掉的点是：忘了清除之前加的 clearfix 类，导致伪元素在单列下仍占空白行高。
现代项目中应优先用 Flexbox 或 Grid 替代 float 布局
float 本质是文本排版工具，不是布局方案。CSS3 的 flex 和 grid 才是专为页面结构设计的。
对比来看：
- 实现两栏自适应：Flexbox 只需父容器
display: flex+ 子项flex: 1；float 需要 float/clear/宽度计算/塌陷处理 - 居中布局：flex 的
justify-content和align-items直接解决；float 需要负 margin、绝对定位等 hack - IE10+ 支持
flex，IE11 支持部分grid，而 float 虽兼容性好，但写法冗余、调试困难
除非维护 2012 年前的老系统，否则把 float 当作布局主力，等于主动给自己加 layout debt。
