最直接方案是 display: inline-block，但需处理空白符缝隙；现代推荐 flex（需设 flex-wrap: nowrap）或 grid（需定义 grid-template-columns）；float 已淘汰。
用 display: inline-block 最直接，但要注意空白符吃空间
块级元素默认换行，想让它们排成一行，display: inline-block 是最贴近直觉的解法——它保留块级元素的宽高、内边距、外边距控制能力，又像内联元素一样可以同行排列。
常见错误是写完发现元素之间有“看不见的缝隙”，比如两个 div 并排后中间多出 4px 左右空隙。这不是 CSS bug，而是 HTML 中换行/缩进产生的空白字符被渲染成了空格。
- 把 HTML 中相邻块元素的结束标签和下一个开始标签写在同一行：
<div></div> <div></div>，而非换行写 - 或者给父容器加
font-size: 0，子元素再单独设字体大小（注意继承影响） - 不推荐用
margin-left: -4px硬调，响应式下容易失效
Flex 布局更可控，flex-wrap: nowrap 是关键
现代项目首选 display: flex，它天然为一维布局设计，对齐、间距、伸缩都比 inline-block 更可靠。
容易踩的坑是忘了关换行：默认 flex-wrap 是 wrap，内容超宽时会自动折行，看起来“没排成一行”。必须显式写 flex-wrap: nowrap。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex和flex-wrap: nowrap - 子元素不用改
display，保持block也照样水平排列 - 如果子元素宽度总和超过容器，会溢出而不是折行——这是预期行为，需配合
overflow或flex-shrink处理
Grid 布局适合固定列数，grid-template-columns 定义轨道
当你明确知道要几列（比如三栏导航、四宫格图标），display: grid 比 Flex 更精准，不用依赖子元素顺序或数量。
性能上无明显差异，但兼容性略低（IE11 需加前缀且不支持 gap）。关键是别漏写列定义——只写 display: grid 不会自动排成一行。
- 横向排列常用写法：
grid-template-columns: repeat(3, 1fr)（三等分）或auto auto auto（按内容宽） - 如果子元素少于列数，空轨道仍存在；多于列数则自动新增行（除非加
grid-auto-flow: column改为纵向填充） -
gap控制间隔，比用margin更干净，不会影响第一项/最后一项的外边距逻辑
float 已淘汰，除非要兼容 IE8 及更老版本
float 能实现同行排列，但副作用太重：父容器高度塌陷、需要清浮动、与其他定位交互复杂。2024 年新项目不该再用。
唯一现实场景是维护遗留系统，且无法升级 CSS 方案。此时务必配 overflow: hidden 或伪元素清浮，否则布局极易错乱。
- 子元素加
float: left后，父容器会“看不见”它们的高度 - 清浮动不是加个
clear: both就完事——得作用在父容器上，比如overflow: hidden或::after { content:""; display:table; clear:both; } - 移动端缩放或横屏时，
float容易触发意外换行，调试成本远高于 Flex/Grid
真正麻烦的不是选哪种方式，而是混用：比如父容器用 Flex，子元素又自己 float，或者 Grid 里塞了 inline-block。浏览器会按规则计算，但结果往往反直觉。定方案前先统一布局层级。
