用 display: flex 替代 float 实现并排布局最可控；若必须用 float，需清除浮动（如 overflow: hidden 或 clear: both）、设置 box-sizing: border-box 并避免空白字符干扰。
float 导致父容器高度塌陷怎么办
用 float: left 让多个 div 并排后，父容器经常“看不见”子元素，高度变成 0——这不是 bug，是 float 的天然行为：浮动元素脱离文档流，父容器无法感知其尺寸。
- 最直接的修复是给父容器加
overflow: hidden或overflow: auto（注意：这会裁剪溢出内容，慎用于弹窗、下拉等场景） - 更稳妥的做法是末尾加一个清除浮动的空元素：
<div style="clear: both"></div> - 现代项目优先用
display: flow-root（兼容 Chrome 64+/Firefox 58+/Safari 15.4+），它让容器建立 BFC 同时不干扰布局逻辑
float:left 和 inline-block 哪个更适合并排
float 是为图文环绕设计的，不是为布局而生；display: inline-block 才是更贴近“多个块并排”语义的选择，但有坑：
-
inline-block元素间会因 HTML 换行/空格产生约 4px 间隙，解决方法：父容器设font-size: 0，再给子元素单独设字体大小 -
float必须配清除，否则影响后续元素；inline-block不会脱离流，后续元素自然换行 - 两者都不支持垂直居中对齐，若需上下居中，得额外用
vertical-align: middle+ 行高配合，或改用 Flex
为什么现在不推荐用 float 做多列布局
不是不能用，而是代价太高：维护成本、响应式适配、可访问性（屏幕阅读器可能跳过浮动内容）、与现代特性冲突（比如 position: sticky 在浮动父容器里失效）。
-
float无法控制主轴/交叉轴对齐，flex一行justify-content: space-between就搞定 - 响应式断点切换列数时，
float需要大量媒体查询重置浮动方向和宽度；grid只需改grid-template-columns - IE8–IE9 是唯一还依赖
float布局的场景，但这类浏览器已基本退出主流支持范围
float:left 元素宽度设百分比后错位了
常见现象：三个 div 各设 width: 33.33%，但最后一行被挤到下一行——问题往往不在 float，而在盒模型和空白字符。
立即学习“前端免费学习笔记（深入）”；
- 检查是否启用了
box-sizing: border-box：没启用时，padding和border会额外增加宽度，导致总宽超 100% - HTML 中元素间的换行符会被渲染为空格，在
inline-block下明显，但在float下也可能因 margin 或父容器 font-size 影响实际占位 - 保险做法：所有浮动元素统一加
margin: 0、padding: 0，并显式设置box-sizing: border-box
float 的本质是脱离流、触发 BFC、影响周围文本流——它不是“让块级元素横着排”的工具，只是历史偶然让它承担了这个角色。真要并排，display: flex 是目前最可控、最少副作用的选择；如果必须用 float，就老老实实清浮动、控盒模型、避开响应式断点。
