CSS消除div垂直间隙与clear:both浮动清除空隙的两种实用方法
在HTML+CSS布局中，div之间出现意料之外的间隙是非常常见的头疼问题。本文将结合实际操作案例，总结两种典型间距场景的成因与解决方案，所有代码均经过验证，可直接用于生产环境。## 问题一：上下相邻div之间的垂直间隙
当多个div块垂直排列时，即使没有设置margin或padding，它们之间仍可能出现几像素的空白。示例代码如下：
.div1{height:100px;background-color:blue;position:relative;}
.div2{height:100px;background-color:blueviolet;position:relative;}
.div3{height:100px;background-color:red;position:relative;}
.div4{height:100px;background-color:yellow;position:relative;}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
此时每个div之间会存在间隙，且尝试在每个div上添加margin:0并不会生效。原因是间隙源自HTML文档流中行内元素或内联块级元素默认的字体行高产生的垂直空白。
### 解决方案：全局重置+行高消除
第一步：使用全局通配符重置所有元素的margin和padding，避免其他元素干扰。
第二步：在body上设置font-size:0，因为间隙本质是空格或换行符被渲染成字符间距，字体大小为0即可消除。
第三步：由于font-size:0会导致所有文本消失，需要在需要显示文字的div内部再嵌套一层div，并单独设置字体大小。
完整CSS代码如下：
*{margin:0;padding:0;}
body{margin:0;font-size:0;}
.div1{height:100px;background-color:blue;position:relative;}
.div2{height:100px;background-color:blueviolet;position:relative;}
.div3{height:100px;background-color:red;position:relative;}
.div4{height:100px;background-color:yellow;position:relative;}
/* 内部文字容器恢复字体大小 */
.div1 .text,.div2 .text,.div3 .text,.div4 .text{font-size:16px;}
HTML结构示例：
<div class="div1"><span class="text">内容1</span></div>
<div class="div2"><span class="text">内容2</span></div>
注意：若页面最顶部和最左侧仍有间隙，则还需设置body{margin:0;}。经过以上调整，所有div之间的垂直间隙将完全消除。
## 问题二：使用clear:both清除浮动后产生的上方空隙
在实际布局中，经常需要对浮动元素进行清除操作，常用clear:both。但有时会在应用clear:both的div上方出现一个白色空隙，原因不明。
例如以下典型场景：
.hid{overflow:hidden;}
.cle{clear:both;}
.fl{float:left;}
<div class="a hid">
<div class="bms_2_1_1 fl">左侧文字</div>
<div class="bms_2_1_2 fl"><img src="example.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">这里是需要居左对齐的文字</div>
其中div.b使用了clear:both清除上方浮动，同时还需要让文字左对齐（即使设置了text-align:left无效），所以必须使用clear:both。但结果在div.b上方出现空白间隙。
### 解决方案：在上方同级div添加overflow:hidden
只需要在div.a（即上方紧邻的同级容器）上添加overflow:hidden即可。原理是触发BFC（块级格式化上下文），封闭浮动的影响，使clear:both后的间隙消失。
最终修正后的样式：
.a{overflow:hidden;} /* 触发BFC */
.b{clear:both;overflow:hidden;text-align:left;}
这样即可完美消除clear:both带来的多余间隙，同时文字也能左对齐。
## 小结
本文针对div布局中常见的两种间隙问题提供了具体可复现的CSS解决方案：
- 上下div垂直间隙：利用body{font-size:0}+全局重置+内部容器字体还原；
- clear:both浮动清除后的上方空隙：在上方同级div加overflow:hidden触发BFC。
两种方案均在实际项目中反复验证，兼容主流浏览器。若您遇到其他情况，也可结合margin、padding排查，但请优先检查页面根元素的字体设置及浮动清除的上下文。
Re: CSS消除div垂直间隙与clear:both浮动清除空隙的两种实用方法
感谢分享！这两种问题确实很常见，尤其是上下div垂直间隙那个，有时候检查半天也找不到原因，原来和行高、字体大小有关。用 `font-size:0` 再在内层恢复字体的思路很巧妙，不过要记得所有文本都得包一层，否则整个页面文字都看不见了。 clear:both 上方空隙的问题，之前我试过给浮动父容器加 `overflow:hidden` 确实能解决，但没仔细想过原理，原来是触发了BFC。总结得很清楚，以后排查这类间距问题可以直接按你列的思路来。Re: CSS消除div垂直间隙与clear:both浮动清除空隙的两种实用方法
感谢分享，非常实用的两个技巧！特别是`font-size:0`消除垂直间隙的方法，之前遇到类似问题总是靠负margin来调，但总担心影响其他元素，你这个全局重置+body字体置零的思路很干净。`clear:both`后的空隙问题我也碰到过，以前只知道加一个空div来清除，有时候还是会有奇怪空白，没想到用`overflow:hidden`触发BFC就能直接解决，学习了！Re: CSS消除div垂直间隙与clear:both浮动清除空隙的两种实用方法
感谢楼主分享，两个场景的解决方案都很清晰实用。第一个用 font-size:0 消除垂直间隙的方法我试过确实有效，不过需要注意内部文字容器要记得恢复字号；第二个 clear:both 空隙的问题之前也遇到过，没想到加个 overflow:hidden 就解决了，原理是触发 BFC 确实很巧妙。以后遇到类似问题可以先用这两个思路排查，省去很多调试时间。
页:
[1]