最可靠方式是 display: flex，因 float 会导致文档流脱离、高度塌陷、响应式难控，仅适用于文字环绕；inline-block 有空白间隙和 vertical-align 错位问题；flex 只需父容器设 display: flex 并按需配置 justify-content、align-items 等参数，配合媒体查询实现响应式布局。
直接用 display: flex 是当前最可靠、语义清晰且无需 hack 的方式，inline-block 和 float 已不推荐用于新项目。
为什么不用 float 实现水平排列
float 会让元素脱离文档流，后续元素可能上浮、父容器高度塌陷，必须手动清除浮动（如 overflow: hidden 或伪元素 ::after），维护成本高，且响应式下行为难控。
- 浏览器默认不为浮动元素保留原始占位，容易引发布局错乱
- 无法原生支持垂直对齐、等高、自动换行等常见需求
- 在 Flexbox 和 Grid 普及后，
float仅应保留在文字环绕等特定场景
inline-block 的坑比你想象的多
看似简单，但 HTML 源码中的换行和空格会被渲染为约 4px 的空白间隙，导致子 div 无法紧密并排；同时 vertical-align 默认是 baseline，不同高度内容会错位。
- 必须统一设置
vertical-align: top或middle才能对齐 - 父容器设
font-size: 0可消除间隙，但需在子元素中重置font-size，易漏 - 不能用
justify-content控制水平分布，扩展性差
flex 布局怎么写才不翻车
只需两步：给父容器加 display: flex，子 div 自动变成 flex item 并水平排列。关键参数要按需配：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 主轴方向控制：
flex-direction: row（默认值，可省略） - 是否换行：
flex-wrap: wrap（需要折行时才加） - 水平分布：
justify-content: space-between（两端对齐）、center（居中）、flex-start（左对齐） - 垂直对齐：
align-items: stretch（默认撑满父高）、center（居中）、flex-end（底部对齐） - 若子元素宽度不固定，建议加
flex: 1或显式设width，避免压缩变形
响应式下别忘了媒体查询
桌面端横排、移动端竖排是常见需求，不要靠 JS 切换 class，用 CSS 媒体查询更轻量：
.container {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
注意：断点值要结合设计稿定，768px 仅作示意；flex-direction: column 会强制子元素竖向堆叠，无需额外清除浮动或重写 display。
真正容易被忽略的是 align-items 的默认行为——它会让所有子 div 高度拉齐到最高那个，如果不想等高，得显式设为 flex-start 或用 align-self 单独控制。
