浮动布局在价格表中易错位，因其使元素脱离文档流，导致等高列、底部对齐和响应式断行难以实现，常见问题包括卡片高度不一致引发的换行偏移及父容器塌陷。
浮动布局在价格表里为什么容易错位
因为 float 会让元素脱离文档流，而价格表通常需要等高列、底部对齐、响应式断行——这些都不是 float 天然支持的。常见错误是：最后一行卡片高度不一致导致下一行被顶偏，或者清除浮动不彻底，父容器塌陷成 0 高度。
实际场景中，你用 float: left 排三列价格卡，但中间那张内容多了一行，整行就往下掉，右边两列空出大块空白。
- 必须给父容器加
overflow: hidden或伪元素::after清除浮动，否则高度丢失 - 所有子项需设固定宽度（如
width: 30%），并配合box-sizing: border-box，不然 padding/border 会撑破 - 避免用
margin-right: 3%模拟间隙——浮动下最后一列可能被挤到下一行，改用margin-left给后两列加左间距更稳
float 和 display: inline-block 布局效果差异在哪
两者都能实现多列，但行为逻辑完全不同：float 是“贴边抽离”，display: inline-block 是“行内对齐”。价格表里最明显的区别是垂直对齐方式和空白处理。
比如你写三张卡片，用 inline-block 默认按 baseline 对齐，文字行高不同就会让卡片底边参差；而 float 默认顶部对齐，看起来更整齐，但清浮动稍麻烦。
立即学习“前端免费学习笔记（深入）”；
-
inline-block元素间有看不见的空白（来自 HTML 换行符），会导致宽度超 100%，必须删空格或设父级font-size: 0 -
float不受文本格式影响，但必须手动清除，且无法直接控制垂直对齐（要靠padding或flex嵌套补救） - 如果价格表要支持 IE8+，
float更稳妥；若只需现代浏览器，inline-block写法更轻量
清除浮动的三种写法，哪一种最不容易漏掉
漏清浮动 = 父容器高度为 0 = 后面的内容全往上跑。最常被忽略的是：只在开发时加了清除，上线前删掉了；或者用了 clear: both 但没加在正确位置。
推荐用伪元素法，它不侵入 HTML，也不依赖额外 DOM 节点，而且一次定义，全局复用。
- 错误示范：
<div style="clear: both"></div>—— 容易被误删，还污染结构 - 半安全写法：
overflow: hidden—— 简单但会隐藏溢出内容（比如下拉菜单、阴影） - 推荐写法：
.price-list::after { content: ""; display: table; clear: both; }—— 无副作用，兼容 IE8+
当价格表需要响应式断列为两列或一列时，float 怎么写才不冲突
用媒体查询改 float 和宽度本身没问题，但关键在于：断列时机和清除逻辑必须同步更新。很多人只改了宽度，忘了在小屏下移除 float 或重置清除方式，结果卡片堆成一列但依然有浮动残留，影响后续布局。
典型错误是：小屏下写了 width: 100% 却没写 float: none，导致卡片仍试图浮动，只是刚好占满一行而已——这种“看似正常”其实埋了坑。
- 移动断点必须同时设置：
float: none+width: 100%+ 确保父级清除规则仍然生效（伪元素法天然兼容） - 避免用
max-width控制列数，应直接用min-width媒体查询，比如@media (max-width: 768px)下切为单列 - 如果价格表嵌在 flex 容器里，
float会被无视——这是 CSS 规范行为，不是 bug，得提前检查父级 display 类型
浮动布局现在看有点老派，但它在某些遗留系统或强兼容需求下仍是可靠选择。真正容易翻车的，从来不是语法本身，而是忘记浮动一旦启用，就全程要为它“善后”——从高度、间隙、断行到清除，缺一不可。
