Flexbox能否解决现有DIV布局问题？仅可添加CSS不可改HTML结构

我太懂接手遗留代码的糟心感了——全是靠float、display和定位硬凑的布局，还碰不了HTML结构，只能靠CSS来救场。结合你给出的结构，我整理了几种常见问题的解决方案，全是纯CSS实现，不用加任何JS库：

你的HTML结构是：

<div id="firstrow"> 1 </div>
<div id="secondrow">
  <div> 2 </div>
  <div> 3 </div>
</div>

问题1：#secondrow里的两个子DIV无法正确并排（原float设置混乱） #

如果目标是让2和3在#secondrow里左右均分宽度并排，优先用Flexbox，比老float方案稳定太多：

#secondrow {
  display: flex;
  gap: 1rem; /* 可选，给两个子元素加间距 */
}

#secondrow > div {
  flex: 1; /* 让两个子元素平分容器宽度 */
  box-sizing: border-box; /* 避免padding/border撑开宽度 */
}

如果必须兼容IE8这类极老浏览器，就用float+清除浮动的方案：

#secondrow {
  overflow: hidden; /* 清除浮动塌陷，让容器包裹子元素 */
}

#secondrow > div {
  float: left;
  width: 48%; /* 留2%作为间距，或者用margin控制 */
  margin-right: 4%;
  box-sizing: border-box;
}

#secondrow > div:last-child {
  margin-right: 0; /* 最后一个元素去掉右边距 */
}

问题2：#firstrow与#secondrow之间出现意外间距/错位 #

大概率是原代码的float、margin默认样式导致的，先重置基础样式再调整：

/* 重置目标元素的默认内外边距 */
#firstrow, #secondrow, #secondrow > div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 清除#firstrow可能带有的float影响，确保占满整行 */
#firstrow {
  float: none;
  width: 100%;
  clear: both; /* 清除之前可能存在的float遗留影响 */
}

问题3：#secondrow因子元素float导致高度塌陷（容器无高度、背景不显示） #

除了上面的overflow: hidden，还可以用伪元素清除法，不会裁剪溢出内容：

#secondrow::after {
  content: "";
  display: table;
  clear: both;
}

通用优化建议 #

• 全局给这些DIV加上box-sizing: border-box，能避免90%的宽度计算混乱问题；
• 尽量用Flexbox替代老旧的float布局，后续维护成本低，布局稳定性更强。

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