CSS高度设置与实际显示不符，是前端布局调试中出现频率极高的一类问题。明明在样式表里写了height: 200px，可是在浏览器开发者工具里查看，元素占用的空间却是 220px、240px 甚至更多。这类问题的根源通常不是浏览器出了bug，而是盒模型计算规则、父级容器约束、内容溢出等隐含规则在悄悄起作用。本文将从几个最常见的角度逐一拆解原因，并给出对应的排查和修复方案。
盒模型：先确认border和padding是否被计入高度
排查的第一步永远是盒模型。默认情况下，元素的box-sizing值为content-box，这意味着你设置的height只作用于内容区域，元素的最终实际高度等于height加上上下padding，再加上上下border。比如下面这段代码：
.box {
height: 200px;
padding: 10px 0;
border: 5px solid #333;
box-sizing: content-box; /* 默认值 */
}
/* 实际占用高度 = 200 + 10 + 10 + 5 + 5 = 230px */
很多人在设计稿里量到的尺寸是包含内边距和边框的，直接把数值写进height就会多出一截。解决办法是切换为border-box，让height直接代表元素的总高度：
* {
box-sizing: border-box; /* 推荐全局设置 */
}
.box {
height: 200px;
padding: 10px 0;
border: 5px solid #333;
/* 总高度正好200px，内容区自动压缩为170px */
}
在开发者工具的Computed面板中，可以直接看到盒模型的结构图，从上到下依次标注了border、padding、content的数值。对照这张图检查，大部分高度偏差都能在十秒内定位。另外要注意行内元素的height是不生效的，需要改成display: inline-block或display: block，这也是新手常踩的坑。
高度塌陷：子元素浮动导致父级高度失效
第二个常见场景是给父容器设置的高度“看起来没生效”，或者父容器压根没有高度。典型原因是子元素全部设置了float，脱离了文档流，父元素内部没有内容支撑，高度坍缩为零。示意代码如下：
<div class="parent">
<div class="child">浮动子元素</div>
<div class="child">浮动子元素</div>
</div>
<style>
.child {
float: left;
width: 100px;
height: 100px;
}
/* parent 的高度为0，因为浮动元素不参与普通文档流的高度计算 */
</style>
解决高度塌陷有多种方案，最经典的是触发BFC（块级格式化上下文）。触发BFC后，容器会包住内部浮动元素的高度。常用的触发方式包括overflow: hidden、display: flow-root等：
.parent {
/* 方案一：现代浏览器推荐，无副作用 */
display: flow-root;
/* 方案二：传统方案，注意可能裁剪溢出内容 */
/* overflow: hidden; */
}
也可以使用伪元素清除浮动的 clearfix 写法，兼容性最好，适合需要支持老旧浏览器的项目。需要注意overflow: hidden会裁剪超出容器的定位元素和阴影，选用方案时要评估副作用。判断是否为塌陷问题很简单：在开发者工具中选中父元素，观察高亮区域是否只有一条线，若父元素高亮为一条扁线而子元素正常显示，基本可以确认是浮动引起的塌陷。
flex与百分比高度：父级约束带来的偏差
flex布局中经常出现“高度不是我设置的那个值”的情况。原因是flex容器内的子元素默认会沿交叉轴拉伸，align-items的默认值是stretch。如果你给子项设置了一个固定高度，但父容器又设置了不同的高度，子项可能被拉伸到父容器的高度，或者因为兄弟元素的存在被压缩：
.container {
display: flex;
height: 300px;
align-items: stretch; /* 默认值，子项会被拉伸 */
}
.item {
height: 200px; /* 实际显示可能是300px，被拉伸覆盖 */
align-self: flex-start; /* 修复：取消该项的拉伸 */
}
另一个高频问题是百分比高度失效。height: 100%要求父级有明确的高度值，如果父级高度是auto，子级的百分比高度就会被浏览器按auto处理。这也就是为什么很多人写了html, body { height: 100%; }之后，内层元素的100%才突然生效：
html, body {
height: 100%; /* 建立高度参照链 */
}
.page {
height: 100%; /* 现在才能正确生效 */
}
除了百分比，还可以用视口单位vh或min-height来规避参照链问题。另外要留意min-height的优先级高于height，当内容较多时，即使写了height: 200px，只要min-height: 300px存在，实际显示高度就会是300px，覆盖你设置的值。
系统化的排查步骤
综合以上场景，可以归纳出一套通用的排查流程。第一步，打开开发者工具选中目标元素，在Computed面板核对盒模型各层数值，确认是content-box还是border-box在起作用；第二步，检查该元素是否被内联样式、更高优先级的选择器或!important覆盖，Styles面板中划线删除的样式就是被覆盖的规则；第三步，检查父级容器的高度约束，确认百分比高度是否有参照，flex容器的align-items是否拉伸了子项；第四步，观察是否存在浮动导致的塌陷或内容溢出导致的撑开。
还有一个容易被忽略的点是行高对元素实际占位的影响。文字的行高大于容器height时，行内内容会把元素撑得更高。此外，表格单元格、图片这类替换元素，其高度计算规则也和普通块级元素不同。排查时善用开发者工具逐层高亮，从外到内逐个检查盒模型，几乎所有高度不符的问题都能定位到具体规则。掌握这套思路后，再遇到类似的尺寸偏差，就不必反复猜测试错了。