如何在浮动容器中实现不同宽度div上下排列？解决行重叠问题

嘿，我一眼就瞅出问题所在了！你遇到的第二行叠在第一行上方的情况，主要是两个关键问题导致的：

核心问题分析 #

1. HTML结构嵌套错误：你的第二个.row被错误地嵌套在第一个.row内部了！这直接导致两个行元素不是同级关系，自然会出现堆叠错位。
2. 内联样式书写错误：第一个.row的style="green"是无效的，应该写成style="background:green"才能正确设置背景色。
3. 浮动导致高度塌陷：因为.title和.wrapper都使用了float:left，会脱离文档流，父元素.row无法自动撑开高度，也会影响布局的正常展示。

修复后的完整代码 #

HTML代码 #

<div class="container">
  <!-- 修复结构：两个.row同级，都在container内 -->
  <div class="row" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">div2</div>
  </div>
  <div class="row" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">div4</div>
  </div>
</div>

CSS代码（简易浮动清除） #

.container {
  width: 100%;
  background: rgb(133, 133, 133);
  height: 100px;
}
.row {
  width: 100%;
  height: 50px;
  /* 用overflow:hidden清除子元素浮动带来的高度塌陷 */
  overflow: hidden;
}
.title {
  width: 20%;
  height: 50px;
  float: left;
}
.wrapper {
  float: left;
  width: 80%;
  height: 50px;
}

如果需要更通用的浮动清除方案（适配复杂布局场景），可以使用clearfix伪元素：

/* 通用清除浮动类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 100%;
  background: rgb(133, 133, 133);
  height: 100px;
}
.row {
  width: 100%;
  height: 50px;
}
.title {
  width: 20%;
  height: 50px;
  float: left;
}
.wrapper {
  float: left;
  width: 80%;
  height: 50px;
}

对应的HTML需要给每个.row加上clearfix类：

<div class="container">
  <div class="row clearfix" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">div2</div>
  </div>
  <div class="row clearfix" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">div4</div>
  </div>
</div>

修复效果说明 #

• 修正结构后，两个.row会作为.container的直接子元素，正常上下排列，不会再出现堆叠。
• 修复样式错误后，第一行的绿色背景能正常显示。
• 清除浮动后，.row的高度会被正确撑开，保证每行的50px高度生效，布局和你预期的表格行结构一致。

内容的提问来源于stack exchange，提问作者jl ma