float: left 元素默认横向排列，堆成一列的主因是子项 width 为 100%、父容器坍缩未清除浮动，或盒模型/空白符导致宽度超限；现代布局应优先选用 flex 或 grid。
float: left 元素为什么堆成一列而不是横排
多个 float: left 元素默认会横向排列，前提是它们的父容器足够宽、且每个元素没有强制换行（比如 width 总和超过父容器，或存在 clear 干扰）。常见“堆成一列”的真实原因是：
.item {
float: left;
width: 100%; /* 每个都占满一行 */
} 或者父容器被前面的浮动撑塌（未清除浮动），导致后续元素从顶部开始重新流式布局，视觉上错位。
父容器必须设定明确宽度或触发 BFC
浮动元素会脱离文档流，若父容器没设 width 且没触发 BFC，高度会坍缩为 0，看起来子元素“飘出容器外”，误以为没横排。解决方式有：
- 给父容器加
overflow: hidden、overflow: auto或display: flow-root（推荐） - 用伪元素清除浮动：
.container::after { content: ""; display: table; clear: both; } - 避免用
height硬撑，不可靠
横向排列失效的三个高频原因
排查顺序建议按以下优先级：
-
margin或padding导致实际宽度超限（尤其盒模型是content-box时） - 元素含
display: block默认样式 +width: 100%，直接独占一行 - HTML 中有换行符或空格被渲染为文字节点，产生微小间隙，多元素叠加后挤到下一行（可设
font-size: 0在父容器中临时消除）
float 布局现在还值得用吗
纯横向排列场景下，float 已不是首选：它本意是图文环绕，强行用于布局需手动清除、易塌陷、响应式困难。现代替代方案更直接：
- 横向排列少量等宽项 →
display: flex+flex-direction: row - 需要折行 →
flex-wrap: wrap - 网格类布局 →
display: grid
除非要兼容 IE8–9，否则不建议新项目用 float 做横向布局。老代码维护时，重点盯住父容器是否坍缩、子项宽度是否算错——这两点占了 90% 的问题。
