应优先使用min-height和max-height而非height，因height强制固定高度易导致溢出或布局断裂，min-height设最小高度允许内容撑开，max-height设上限并配合overflow控制溢出。
元素高度被内容撑开是正常行为，不是 bug
CSS 中块级元素默认会随内容自动扩展高度，height 设为固定值时才会强制截断或留白。很多“被撑开”问题其实是期望用 min-height 或 max-height 控制边界，却误用了 height。
什么时候该用 height、min-height、max-height
三者语义和行为差异明显，混用会导致预期外的布局断裂：
-
height：硬性设定，内容超出会溢出（overflow: visible）或被裁剪（overflow: hidden），不随内容自适应 -
min-height：最小底线，内容少时保持该高度，内容多时自然撑高，适合卡片、容器等需要“至少这么高”的场景 -
max-height：上限封顶，内容超出时触发滚动或裁剪，常配合overflow: auto做可折叠区域
常见撑开问题与修复写法
典型现象：设置了 height: 200px，但元素实际高度变成 240px；或父容器莫名增高，子元素 margin 不生效——大概率是盒模型、内边距或未清除浮动导致。
- 检查是否忘了
box-sizing: border-box：默认content-box下，padding和border会额外增加高度 - 确认子元素有没有脱离文档流（如
float未清除），导致父容器无法正确计算高度 - 文字换行、行高叠加（
line-height× 行数）可能超出预设height，此时应改用min-height+overflow: hidden截断，或用display: -webkit-box多行省略 - Flex / Grid 容器中，子项默认
align-items: stretch，会拉伸填满容器高度，需显式设align-items: flex-start阻止撑高
.card {
min-height: 120px; /* 内容少时不塌缩 */
padding: 16px;
box-sizing: border-box; /* 关键：让 padding 不撑高 */
}
.text-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
max-height: 4.5em; / 3 行 × line-height /
}
调试建议：快速定位高度来源
Chrome DevTools 的 Layout 面板能直观显示盒模型各部分尺寸。右键元素 → “Inspect” → 右侧 “Computed” 标签页下拉到底，看 height、min-height、max-height 实际计算值；再点 “Layout” 查看 margin/padding/border 是否参与撑高。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 1px solid red区分元素真实边界（比border不影响布局） - 禁用所有
height相关声明，观察是否回归预期，再逐个启用对比 - 注意继承值：某些 UI 框架（如 Ant Design）会给
div默认min-height: 0，覆盖后可能意外释放高度
真正卡住的往往不是属性不会写，而是没意识到 height 是强制约束，而多数业务场景要的是弹性边界——这时候 min-height 和 max-height 才是更安全的选择。
