在网页前端开发中，三排水平布局被广泛用于商品展示、数据对比、导航卡片等常见场景。然而不少开发者在完成三列结构后，会发现后续的段落文本、按钮或其他块级内容与三列区域发生重叠，导致内容相互遮挡。这类问题往往并非浏览器渲染错误，而是由于浮动、定位以及盒模型等CSS规则在特定组合下产生了不符合预期的布局结果。只有定位到问题的真正来源，才能有针对性地修复并避免后续内容异常。
一、三排水平布局中常见的重叠原因
1. 浮动元素未清除导致父容器高度塌陷
当使用float: left或者float: right实现三列水平排列时，浮动元素会脱离普通文档流，父容器在默认情况下不会将浮动子元素的高度计入自身高度。也就是说，如果父容器没有设置高度，也没有触发块级格式化上下文，它的高度会塌陷为0或仅由其他普通流内容撑起。此时父容器之后的文本或<div>元素会按照正常流向上移动，直接与浮动的三列内容发生重叠。很多开发者看到的现象是：三列背景色块还在，但下方文字跑进了色块区域。
下面的代码展示了一个典型错误：.container没有清除浮动，.left、.middle、.right三个<div>均向左浮动，而后续的.text块位于父容器之后。由于父容器高度塌陷，.text会与浮动元素重叠。
/* 问题：父容器未清除浮动，后续文本会与三列重叠 */
.container {
/* 没有触发BFC，也没有清除浮动 */
}
.left,
.middle,
.right {
float: left;
width: 30%;
height: 200px;
}
.left {
background: #f0f0f0;
}
.middle {
background: #e0e0e0;
}
.right {
background: #d0d0d0;
}
.text {
/* 普通流内容会向上填补父容器塌陷后的空间 */
}
对应的HTML结构如下，可以看到父容器之后紧跟着一段文本，这段文本会因为高度塌陷而上移。
<div class="container">
<div class="left">左侧区域</div>
<div class="middle">中间区域</div>
<div class="right">右侧区域</div>
</div>
<div class="text">这里是一段后续文本，会与上面的三列区域发生重叠。</div>
2. 绝对定位元素脱离文档流
如果给三列<div>设置了position: absolute或者position: fixed，这些元素就会完全脱离普通文档流。它们不会再占据原有的布局空间，后续的文本或其他<div>元素会忽略这些定位元素的存在，直接按照正常流填充到原来的位置。于是绝对定位的三列区域与后续文本就会在视觉上叠加在一起。
此外，绝对定位元素的位置是相对最近的已定位祖先元素计算的，如果开发者没有理解这一点，只看到元素脱离文档流，却没有为后续内容预留空间，重叠就不可避免。下面的代码中，三列都使用了绝对定位，而.text没有设置任何偏移量，文本自然会上移到三列所在区域。
/* 问题：绝对定位元素脱离文档流，后续内容会占用其原始空间 */
.left {
position: absolute;
left: 0;
width: 30%;
height: 200px;
background: #f0f0f0;
}
.middle {
position: absolute;
left: 30%;
width: 30%;
height: 200px;
background: #e0e0e0;
}
.right {
position: absolute;
left: 60%;
width: 30%;
height: 200px;
background: #d0d0d0;
}
.text {
/* 没有设置margin-top或padding-top，文本会显示在绝对定位元素下方 */
}
3. 盒模型宽度计算不符合预期
CSS的默认盒模型为content-box，在这种模式下，元素设置的width只包含内容区域的宽度，而padding和border会额外增加到元素的总宽度中。如果开发者给三列设置了width: 33.33%，同时又添加了padding: 20px，那么每一列的实际占据宽度就会变成33.33% + 40px，三列加在一起会明显超过父容器的宽度。
一旦总宽度超过容器，浏览器可能强制换行或压缩元素，导致三列无法保持在同一水平线上。后续的文本也可能因此被挤压到浮动元素的下方或旁边，形成重叠和错位。下面的代码展示了这种宽度计算错误。
/* 问题：content-box 模式下 width 不包含 padding 和 border */
.left,
.middle,
.right {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
}
.left {
background: #f0f0f0;
}
.middle {
background: #e0e0e0;
}
.right {
background: #d0d0d0;
}
/* 每个元素实际占据宽度为 33.33% + 40px，三列总宽超过容器 */
二、修复重叠问题的关键做法
1. 为浮动容器建立块级格式化上下文
对于浮动导致的父容器高度塌陷，最直接的办法是让父容器能够正确计算浮动子元素的高度。给父容器设置overflow: hidden、overflow: auto或者display: flow-root，都可以触发块级格式化上下文，使父容器包裹住浮动的子元素。也可以使用经典的clearfix技巧，通过伪元素清除浮动。
一旦父容器的高度被正确撑开，之后的内容就会排列在父容器的下方，不会再与三列区域发生重叠。下面的样式采用overflow: hidden修复了容器高度塌陷的问题。
/* 方法一：给父容器设置 overflow: hidden，触发BFC */
.container {
overflow: hidden;
}
.left,
.middle,
.right {
float: left;
width: 30%;
height: 200px;
}
.left {
background: #f0f0f0;
}
.middle {
background: #e0e0e0;
}
.right {
background: #d0d0d0;
}
.text {
/* 父容器高度被正确撑开后，文本会在下方正常显示 */
}
2. 控制绝对定位与文档流的关系
如果业务场景允许，应当尽量避免使用绝对定位来实现三排水平布局。浮动、Flexbox或Grid都能在保持元素位于文档流中的同时完成水平排列，从而减少重叠风险。如果确实需要使用绝对定位，就必须手动为后续内容设置相应的margin-top或padding-top，以预留出绝对定位元素所占据的高度。
下面的代码中，三列仍然使用绝对定位，但.text设置了margin-top: 200px，这样文本就会显示在三列区域的下方，不会与定位元素重叠。
/* 若必须使用绝对定位，需为后续内容预留空间 */
.left {
position: absolute;
left: 0;
width: 30%;
height: 200px;
background: #f0f0f0;
}
.middle {
position: absolute;
left: 30%;
width: 30%;
height: 200px;
background: #e0e0e0;
}
.right {
position: absolute;
left: 60%;
width: 30%;
height: 200px;
background: #d0d0d0;
}
.text {
margin-top: 200px; /* 预留出绝对定位列的高度 */
}
3. 统一盒模型为border-box
为了避免padding和border导致宽度超出容器，可以在全局样式中将box-sizing设置为border-box。这样设置的width就包含了内容、内边距和边框的总宽度，开发者可以更直观地控制每列的实际占据空间。
下面的代码通过全局选择器设置box-sizing: border-box，三列即使各自拥有padding: 20px，总宽度也正好是33.33%，不会超出容器，从而避免了因换行或挤压造成的重叠。
/* 全局使用 border-box，让 padding 和 border 包含在 width 内 */
* {
box-sizing: border-box;
}
.left,
.middle,
.right {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
}
.left {
background: #f0f0f0;
}
.middle {
background: #e0e0e0;
}
.right {
background: #d0d0d0;
}
/* 现在每个元素总宽度正好是 33.33%，不会超出容器 */
三、更稳定高效的三排水平布局方案
Flexbox是现代CSS布局中非常实用的工具，它能够在不依赖浮动和清除浮动技巧的情况下，让多个子元素在水平方向上稳定排列。父容器只需要设置display: flex，子元素就会默认排成一行，并且不会出现高度塌陷的问题。后续的文本或者<div>元素也会按照文档流正常显示在Flex容器下方，不会与三列发生重叠。
使用justify-content: space-between可以让三列自动两端对齐，中间保持均匀间距。使用gap属性还可以直接控制列与列之间的空隙，而不必依赖外边距计算。下面是一个完整的三排水平布局示例，父容器开启Flexbox后，三列内容稳定排列，后续文本正常显示。
/* 使用 Flexbox 实现三排水平布局，无需清除浮动 */
.container {
display: flex;
justify-content: space-between;
}
.left,
.middle,
.right {
width: 30%;
height: 200px;
}
.left {
background: #f0f0f0;
}
.middle {
background: #e0e0e0;
}
.right {
background: #d0d0d0;
}
.text {
/* 文本位于 flex 容器之后，正常显示，不会与三列重叠 */
}
对应的HTML结构如下，父容器内部是三列内容，外部是后续文本。
<div class="container">
<div class="left">左侧区域</div>
<div class="middle">中间区域</div>
<div class="right">右侧区域</div>
</div>
<div class="text">后续内容文本，布局稳定且不会产生重叠。</div>
相比浮动布局，Flexbox的优势在于父容器高度由子元素自然撑开，无需额外清理浮动；相比绝对定位，Flexbox的子元素仍然处于文档流中，不会造成后续内容覆盖。对于大多数三排水平布局需求而言，Flexbox都是更省心、更可维护的选择。
总结而言，文本与<div>在三排水平布局中重叠，核心原因几乎都集中在浮动清理、定位方式以及盒模型计算三个方面。解决思路也相应清晰：使用浮动时确保父容器形成新的块级格式化上下文，使用绝对定位时主动管理文档流占位，使用padding或border时优先采用box-sizing: border-box。如果条件允许，更推荐直接使用Flexbox构建水平排列结构，它能在不依赖浮动和清除技巧的情况下提供稳定的布局表现。开发过程中还应借助浏览器开发者工具检查实际宽度、高度与文档流位置，及时发现潜在的重叠风险。
在后续维护中，如果页面出现类似重叠，不妨从这三个方向逐一排查：父容器高度是否正常、元素是否脱离文档流、盒模型宽度是否超过预期。这样可以更快定位问题，减少无效调整，让三排水平布局始终保持清晰、稳定。