在不使用 Flexbox 的前提下，让浮动布局中后一个子元素（.child2）严格匹配父容器高度的关键在于：父元素需获得正确高度（通过 BFC 触发），而子元素需脱离文档流并利用 top: 0; bottom: 0 拉伸填充——这是 CSS 定位机制对百分比高度限制的可靠绕过方式。
在不使用 flexbox 的前提下，让浮动布局中后一个子元素（`.child2`）严格匹配父容器高度的关键在于：父元素需获得正确高度（通过 bfc 触发），而子元素需脱离文档流并利用 `top: 0; bottom: 0` 拉伸填充——这是 css 定位机制对百分比高度限制的可靠绕过方式。
在标准 CSS 布局中，百分比高度（height: 100%）生效的前提是：父元素具有明确的高度值（非 auto）。而浮动子元素会导致父容器发生高度塌陷（height: 0），此时即使设置 height: 100%，子元素也无“参照基准”，自然无法拉伸。
你最初尝试的 display: flow-root 确实能创建新的块级格式化上下文（BFC），从而让 .parent 正确包裹浮动的 .child（即撑开高度），但问题在于：.child2 仍处于文档流中且未脱离浮动影响，其 height: 100% 依然无效——因为此时父容器虽有了高度，但 .child2 的 height: 100% 在浮动上下文中仍受制于自身内容高度和计算逻辑，而非父容器可视高度。
✅ 正确解法（无 Flexbox）：结合 BFC + 绝对定位
核心思路分两步：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器拥有真实高度：用 display: flow-root（或 overflow: hidden、::after 清除浮动等）触发 BFC；
- 让目标子元素脱离文档流并强制拉伸：对 .child2 应用 position: absolute，并设置 top: 0; bottom: 0; right: 0，使其上下边界锚定父容器，从而无视内容高度，完全填充可用垂直空间。
以下是可直接运行的完整代码示例：
.parent {
position: relative; /* 为绝对定位提供定位上下文 */
display: flow-root; /* 触发 BFC，防止浮动塌陷 */
background-color: aqua;
padding: 8px; /* 可选：增加视觉呼吸感 */
}
.child {
background: lime;
margin-right: 12px; /* 避免与 .child2 重叠（因 .child2 是绝对定位） */
}
.child2 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: blue;
width: max-content; /* 保持内容宽度，避免过度拉伸 */
}<div class="parent">
<div class="child">
<p>abcd</p>
<p>efg</p>
<p>hij</p>
</div>
<div class="child2">
<p>abcd</p>
</div>
</div>⚠️ 注意事项：
- position: relative 必须加在 .parent 上，否则 absolute 子元素将相对于最近的已定位祖先（可能是 <body>）定位，导致错位；
- .child2 脱离文档流后，.child 不再需要 float —— 实际上建议移除 float: left，改用 display: inline-block 或纯静态流布局，以简化维护；
- 此方案要求 .child 的内容高度 ≥ .child2 的原始高度（即父容器高度由 .child 决定），否则 .child2 会拉伸至父容器高度，但 .child 反而可能显得“矮”——这正是你原始需求中“第一个 div 拉伸父容器，第二个跟随该高度”的准确体现；
- 若需响应式适配，可配合 min-height 或媒体查询增强鲁棒性。
? 总结：在 Flexbox 普及前，position: absolute + top/bottom 是解决“等高列”最经典、兼容性极佳（IE7+）的技术方案。它不依赖现代布局模块，而是深度利用 CSS 定位与 BFC 的底层机制，是理解 CSS 盒模型与渲染原理的重要实践案例。
