float left 左右并排不生效主因是父容器未清除浮动致高度塌陷，或子元素 width+padding+border 超 100%；百分比宽度按父内容区计算，混用 inline-block 会引发空白；现代布局应优先使用 flex 或 grid。
float left 为什么左右并排不生效
最常见的原因是父容器没清除浮动，导致高度塌陷，视觉上“掉下来”或重叠。另一个高频问题是子元素宽度加起来超过100%，比如两个 50% 宽度元素，但加了 border 或 padding 后实际占宽超限，触发换行。
- 务必给父容器设置
overflow: hidden或::after清除浮动（推荐后者） - 所有浮动子元素的
width、padding、border总和不能超过 100% —— 建议用box-sizing: border-box - 避免对浮动元素设
margin-right: auto这类无效声明，float下auto外边距不触发居中逻辑
百分比宽度在 float 布局中的计算陷阱
百分比是相对于父容器内容区（content box）计算的，不是整个父元素宽。如果父容器有 padding，子元素 50% 就只占内容区的一半，而非整个可视区域的一半。
- 父容器若设了
padding: 20px，子元素width: 50%实际是(父宽 - 40px) × 0.5 - 想严格等分，要么父容器零内边距，要么改用
calc(50% - 20px)补偿（但需手动算） - 更稳妥的做法：统一用
box-sizing: border-box+ 显式控制padding和border，避免隐式溢出
float left 配合 display: inline-block 的冲突
混用 float: left 和 display: inline-block 极易导致对齐错乱或额外空白 —— 因为 inline-block 会把 HTML 换行符/空格当文本节点渲染，产生约 4px 间隙；而 float 元素则完全脱离文档流，不再受这些影响。
- 不要在一个布局里同时给同级元素设
float: left和display: inline-block - 如果用了
float，就别依赖vertical-align对齐；它对浮动元素无效 - 需要基线对齐？改用
flex或grid，float本身就不解决垂直对齐问题
现代项目里还该用 float left 做并排吗
不该。除非要兼容 IE8 及更老浏览器，否则 float 已是过时方案。它的清除逻辑脆弱、响应式适配成本高、无法控制主轴/交叉轴对齐，且与 position: sticky、transform 等特性存在隐式冲突。
- 替代方案优先选
display: flex：父容器加display: flex，子元素自动并排，无塌陷，支持gap、justify-content - 需要多行或复杂网格？直接上
display: grid，用grid-template-columns: 1fr 1fr更直观 - 如果必须用
float（如维护旧系统），请确保每个浮动元素都有明确的width，且父容器有清除机制 —— 这点漏掉，90% 的“不并排”问题就来了
事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
