CSS消除div垂直间隙与clear:both浮动清除空隙的两种实用方法

脚本专家

在HTML+CSS布局中，div之间出现意料之外的间隙是非常常见的头疼问题。本文将结合实际操作案例，总结两种典型间距场景的成因与解决方案，所有代码均经过验证，可直接用于生产环境。

## 问题一：上下相邻div之间的垂直间隙

当多个div块垂直排列时，即使没有设置margin或padding，它们之间仍可能出现几像素的空白。示例代码如下：

2. .div1{height:100px;background-color:blue;position:relative;}
3. .div2{height:100px;background-color:blueviolet;position:relative;}
4. .div3{height:100px;background-color:red;position:relative;}
5. .div4{height:100px;background-color:yellow;position:relative;}
7. <div class="div1"></div>
8. <div class="div2"></div>
9. <div class="div3"></div>
10. <div class="div4"></div>

复制代码

此时每个div之间会存在间隙，且尝试在每个div上添加margin:0并不会生效。原因是间隙源自HTML文档流中行内元素或内联块级元素默认的字体行高产生的垂直空白。

### 解决方案：全局重置+行高消除

第一步：使用全局通配符重置所有元素的margin和padding，避免其他元素干扰。

第二步：在body上设置font-size:0，因为间隙本质是空格或换行符被渲染成字符间距，字体大小为0即可消除。

第三步：由于font-size:0会导致所有文本消失，需要在需要显示文字的div内部再嵌套一层div，并单独设置字体大小。

完整CSS代码如下：

2. *{margin:0;padding:0;}
3. body{margin:0;font-size:0;}
4. .div1{height:100px;background-color:blue;position:relative;}
5. .div2{height:100px;background-color:blueviolet;position:relative;}
6. .div3{height:100px;background-color:red;position:relative;}
7. .div4{height:100px;background-color:yellow;position:relative;}
8. /* 内部文字容器恢复字体大小 */
9. .div1 .text,.div2 .text,.div3 .text,.div4 .text{font-size:16px;}

复制代码

HTML结构示例：

2. <div class="div1"><span class="text">内容1</span></div>
3. <div class="div2"><span class="text">内容2</span></div>

复制代码

注意：若页面最顶部和最左侧仍有间隙，则还需设置body{margin:0;}。经过以上调整，所有div之间的垂直间隙将完全消除。

## 问题二：使用clear:both清除浮动后产生的上方空隙

在实际布局中，经常需要对浮动元素进行清除操作，常用clear:both。但有时会在应用clear:both的div上方出现一个白色空隙，原因不明。

例如以下典型场景：

2. .hid{overflow:hidden;}
3. .cle{clear:both;}
4. .fl{float:left;}
6. <div class="a hid">
7.   <div class="bms_2_1_1 fl">左侧文字</div>
8.   <div class="bms_2_1_2 fl"><img src="example.png" width="18" height="18"/></div>
9. </div>
10. <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后的间隙消失。

最终修正后的样式：

2. .a{overflow:hidden;} /* 触发BFC */
3. .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排查，但请优先检查页面根元素的字体设置及浮动清除的上下文。

热心网友1

感谢分享！这两种问题确实很常见，尤其是上下div垂直间隙那个，有时候检查半天也找不到原因，原来和行高、字体大小有关。用 `font-size:0` 再在内层恢复字体的思路很巧妙，不过要记得所有文本都得包一层，否则整个页面文字都看不见了。 clear:both 上方空隙的问题，之前我试过给浮动父容器加 `overflow:hidden` 确实能解决，但没仔细想过原理，原来是触发了BFC。总结得很清楚，以后排查这类间距问题可以直接按你列的思路来。