别设固定高度，优先换 display: flex 或 display: grid；必须保留浮动时用 overflow: hidden 触发 bfc 包住父容器。因内容长度不可控，固定 height 易致文字溢出或留白，响应式下断点失效，且无法解决浮动上浮错位问题。
直接说结论：别设固定高度，优先换 display: flex 或 display: grid；如果必须保留浮动，就用 overflow: hidden 触发 BFC 包住父容器，而不是靠 height 硬撑。
为什么设固定 height 是错的路
内容长度不可控——标题字数、描述段落、响应式字体缩放都会让实际高度变。设死 height: 200px 后，要么文字被 overflow: hidden 切掉，要么矮图留大片空白。更麻烦的是，这种写法在媒体查询里一缩屏就露馅：PC 看着齐整，平板上所有卡片突然错行，因为 height 没跟着断点重算。
常见错误现象包括：
-
text-overflow: ellipsis失效（它只对单行inline元素有效，而固定 height 容器里常是多行） - 图片用
object-fit: cover后上下裁剪不一致，因容器 height 固定但宽高比不同 - 加了
min-height也救不了——它只防塌，不解决后续浮动项“上浮”到矮图右侧空隙的问题
用 display: flex 替代 float 的实操要点
不是删掉 float: left 再加 display: flex 就完事。关键在三个配置必须同步改：
- 父容器加
display: flex和flex-wrap: wrap，否则所有子项强行挤在一行，溢出容器 - 子项别写
width，改用flex: 0 0 calc(33.333% - 16px)（三列带 gap）或flex: 1 1 280px（自适应最小宽度） - 对齐方式显式设
align-items: flex-start，否则默认stretch会把所有子项拉到等高，反而暴露内容高度差
IE10–11 需注意：flex: 1 必须展开为 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，否则行为异常。
必须保留浮动时怎么稳住布局
真没法立刻重构老代码？那就只做一件事：让父容器「看见」浮动子项的高度。最稳方案是给父容器加 overflow: hidden（或 auto），它会触发 BFC，自动包裹所有浮动元素。
别用这些替代方案：
-
clear: both加在每个子项上——强制换行，破坏横向排列 - 伪元素
::after清除浮动但没设height: 0和font-size: 0——清除节点仍占行高，底部多出空白 - 给每个浮动项加
vertical-align: top——它对float无效，只影响inline或table-cell
响应式断点里最容易漏掉这点：PC 用 overflow: hidden 好好的，一到平板媒体查询里父容器改成 overflow: visible（比如为了显示下拉菜单），塌陷立刻重现。
真正难处理的不是高度不一致本身，而是那些没写进 CSS 文件里的隐含依赖——比如 JS 动态插入图片后忘了触发重排，或者第三方组件内部偷偷用了 float 却没清浮动。这时候再统一 height 或 padding，只是把问题盖得更深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
