浮动与inline-block可结合用于灵活布局。1. 解决间隙：父元素font-size设0或移除HTML空格；2. 混合布局：侧栏用float，内部卡片用inline-block；3. 清除浮动影响：通过BFC或clear避免错位，调整vertical-align对齐；4. 响应式处理：设置box-sizing、white-space，媒体查询中切换显示模式。建议高控场景用浮动或Flexbox，文本流用inline-block。
在网页布局中，CSS的浮动（float）和inline-block都是常见的元素排列方式。虽然它们可以单独使用，但在某些场景下结合使用能更灵活地控制布局结构。下面介绍几种实用技巧。
1. 解决inline-block元素间的空白间隙
当多个inline-block元素并排显示时，HTML中的换行或空格会被浏览器渲染成空白字符，导致元素之间出现不必要的间距。使用浮动可以避免这个问题，但若仍需保留inline-block特性，可通过以下方法处理：
- 将父容器的font-size设为0，再为子元素重新设置字体大小
- 在HTML中移除元素之间的换行和空格
- 使用浮动替代inline-block进行水平排列
2. 浮动与inline-block混合布局的应用
在一些复杂结构中，比如侧边栏+内容区，主内容区内又包含多个inline-block元素，此时可让侧边栏使用float，内部模块使用inline-block实现紧凑排列。
示例场景：- 左侧固定宽度侧栏用 float: left
- 右侧内容区包裹多个 inline-block 的卡片
- 内容区本身不浮动，但通过 margin 避开侧栏
这样既能实现两栏布局，又能保持内部元素的内联特性，适合标签、缩略图等小模块展示。
立即学习“前端免费学习笔记（深入）”；
3. 清除浮动对inline-block的影响
浮动元素会脱离文档流，可能影响后续inline-block元素的对齐或位置。必须正确清除浮动，防止布局错乱。
提示：inline-block元素默认垂直对齐 baseline，若与浮动元素高度不一致，可用 vertical-align 调整对齐方式。4. 响应式中的兼容性处理
在小屏幕下，浮动可能导致元素堆叠错位，而inline-block元素在宽度不足时会自动换行。结合两者时要注意容器宽度计算。
- 为inline-block元素设置 box-sizing: border-box
- 控制父容器 white-space: nowrap 防止换行（谨慎使用）
- 媒体查询中切换 display 类型，如小屏改用 block + margin 自动居中
现代布局推荐逐步过渡到 Flex 或 Grid，但在维护旧项目时，理解float与inline-block的协作逻辑依然重要。
基本上就这些。掌握它们的行为差异，才能在不同场景下灵活选择方案。
