inline-block元素间空隙是换行符和空格被渲染为文本节点所致；float可消除间隙但需处理清除浮动、高度塌陷、box-sizing及图片留白等问题，且存在语义断裂与兼容性隐性代价。
为什么 inline-block 元素之间总有看不见的空隙
这个空隙不是 bug，是浏览器把换行符和空格当作文本节点渲染的结果。只要 HTML 里写了换行或缩进，<div></div>
<div></div> 就会等效于 <div></div> <div></div>，中间那个空格被当成字符占了 4px 左右宽度。
用 float 替代 inline-block 的实际写法
浮动本身不产生间隙，但会脱离文档流，所以必须处理父容器高度塌陷问题。常见做法是给父元素加 overflow: hidden 或用 ::after 清除浮动。
- 子元素统一设
float: left，宽度建议用百分比或固定值（避免因小数像素导致换行） - 父容器加
overflow: hidden最简单，但会裁剪溢出内容；更稳妥的是用clearfix类 - 别忘了重置
margin和padding：浮动元素默认可能带margin，比如button在某些 UA 样式里有默认外边距
/* 示例：三列等宽布局 */
.container {
overflow: hidden;
}
.item {
float: left;
width: 33.333%;
}
float 布局的兼容性和隐性代价
IE8+ 都支持 float，但现代项目里它最大的问题是语义断裂——你只是想排个横排按钮，结果得操心清除浮动、高度塌陷、响应式断点重写样式。而且一旦加了 position: absolute 或 transform，浮动行为可能意外失效。
-
float元素无法使用vertical-align对齐，垂直居中得靠line-height或flex包裹 - 媒体查询里改列数时，
float要重新计算百分比宽度，容易因四舍五入错位 - 如果父容器用了
display: flex，子元素的float会被忽略——这在组件嵌套时容易踩坑
真要选 float，这些细节不能漏
很多人试了 float 发现还是换行，八成是没处理好两个地方：一是父容器没清除浮动，二是子元素宽度加起来超过 100%（比如 33.333% × 3 = 99.999%，看似够，但浏览器渲染时可能进一位）。
- 宽度用
calc(100% / 3)比硬写33.333%更可靠 - 所有浮动子元素必须声明
box-sizing: border-box，否则padding和border会让实际宽度超限 - 如果子元素含图片，记得设
font-size: 0在父容器上，防止图片下方留白（这是另一个行内元素基线对齐导致的间隙）
浮动能解决 inline-block 的间隙，但它把布局责任从“自动排列”推给了手动干预。真正麻烦的不是怎么写 float，而是后续所有扩展需求——比如加 hover 动画、适配移动端、嵌套进 flex 容器——都会多一层意外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
