在网页前端开发中，三排水平布局是非常常见的页面结构，很多开发者在实现这类布局时，会遇到文本内容和div元素相互重叠的问题，导致页面展示异常。这种问题通常不是单一原因导致的，和CSS属性的设置、元素的计算规则都有关系。
常见重叠原因及对应场景
1. 浮动属性未清除导致高度塌陷
很多开发者会用float:left实现三排水平排列，但是如果父容器没有清除浮动，就会导致父容器高度无法被子元素撑开，后续的文本或者其他div就会跑到浮动元素的下方，出现重叠的情况。
以下是一个错误示例：
/* 错误样式 */
.container {
/* 没有清除浮动 */
}
.left {
float: left;
width: 30%;
height: 200px;
background: #f0f0f0;
}
.middle {
float: left;
width: 30%;
height: 200px;
background: #e0e0e0;
}
.right {
float: left;
width: 30%;
height: 200px;
background: #d0d0d0;
}
.text {
/* 文本会跑到三个浮动div的下方重叠 */
}
对应的HTML结构：
<div class="container">
<div class="left">左侧区域</div>
<div class="middle">中间区域</div>
<div class="right">右侧区域</div>
</div>
<div class="text">这是后续的内容文本，会和上面的三个div重叠</div>
2. 定位属性设置不当
如果给三排div设置了position:absolute或者position:fixed，这些元素会脱离文档流，不占据原来的位置，后续的文本或者其他div就会填充到原来的位置，出现重叠。
错误示例样式：
.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 {
/* 文本会跑到三个绝对定位div的下方，出现重叠 */
}
3. 盒模型计算错误
如果给元素设置了padding或者border，但是没有调整box-sizing属性，就会导致元素的总宽度超过预期，三排div放不下就会换行，或者挤到后面的文本区域，造成重叠。
错误示例：
.left {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #f0f0f0;
/* 默认box-sizing为content-box，总宽度是33.33% + 40px，超过容器宽度 */
}
.middle {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #e0e0e0;
}
.right {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #d0d0d0;
}
对应的解决方法
清除浮动解决高度塌陷
给父容器添加清除浮动的样式，或者设置overflow:hidden，让父容器可以正确计算浮动子元素的高度。
/* 正确样式 */
.container {
overflow: hidden; /* 清除浮动，让父容器撑开高度 */
}
.left {
float: left;
width: 30%;
height: 200px;
background: #f0f0f0;
}
.middle {
float: left;
width: 30%;
height: 200px;
background: #e0e0e0;
}
.right {
float: left;
width: 30%;
height: 200px;
background: #d0d0d0;
}
.text {
/* 现在文本会在三个div的下方正常显示，不会重叠 */
}
调整定位属性使用
如果不是必须使用绝对定位，尽量用浮动或者flex布局实现三排水平排列，避免元素脱离文档流。如果一定要用绝对定位，需要给后续的文本元素设置对应的margin值，避开定位元素的位置。
.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; /* 给文本设置上边距，避开三个绝对定位的div */
}
调整盒模型计算规则
给元素设置box-sizing: border-box，让padding和border的宽度计算在设置的width内部，避免总宽度超出。
* {
box-sizing: border-box; /* 全局设置盒模型为border-box */
}
.left {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #f0f0f0;
/* 现在总宽度就是33.33%，不会超出 */
}
.middle {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #e0e0e0;
}
.right {
float: left;
width: 33.33%;
padding: 20px;
height: 200px;
background: #d0d0d0;
}
更推荐的三排水平布局方案
使用flex布局可以更简单地实现三排水平排列，不需要处理浮动和清除浮动的问题，也能避免很多重叠问题。
.container {
display: flex; /* 开启flex布局 */
justify-content: space-between; /* 子元素两端对齐 */
}
.left {
width: 30%;
height: 200px;
background: #f0f0f0;
}
.middle {
width: 30%;
height: 200px;
background: #e0e0e0;
}
.right {
width: 30%;
height: 200px;
background: #d0d0d0;
}
.text {
/* 文本会正常显示在容器下方，不会重叠 */
}
对应的HTML结构：
<div class="container">
<div class="left">左侧区域</div>
<div class="middle">中间区域</div>
<div class="right">右侧区域</div>
</div>
<div class="text">这是后续的内容文本，布局正常不会重叠</div>