本文详解如何通过 box-sizing: border-box 修正浮动（float）布局中因边框导致的宽度计算偏差，并确保左右区域等高适配容器，是响应式老式布局的实用调试指南。
本文详解如何通过 `box-sizing: border-box` 修正浮动（float）布局中因边框导致的宽度计算偏差，并确保左右区域等高适配容器，是响应式老式布局的实用调试指南。
在使用 float: left 和 float: right 实现两栏布局时，许多初学者会遇到一个典型问题：明明为 .article 设置了 width: 70%、为 .aside 设置了 width: 30%，但两者却无法并排填满父容器——反而出现换行、间隙，甚至需要将右侧宽度“魔改”为 29.6% 才勉强对齐。根本原因在于 CSS 默认的盒模型（box-sizing: content-box）将 border 和 padding 视为额外尺寸，叠加在设定的 width 之外。
例如：当 .article 宽度设为 70% 且带有 1px 双边框时，其实际占用水平空间 = 70% + 2px；同理，.aside 占用 30% + 2px。两者相加已超过 100%，再加上父容器自身的 1px 边框，必然导致溢出和浮动失效。
✅ 正确解法：统一启用 border-box 盒模型
只需为所有参与浮动布局的元素（包括容器、浮动子元素）添加：
* {
box-sizing: border-box;
}
/* 或针对性设置 */
.container,
article,
aside {
box-sizing: border-box;
}
这样，width: 70% 就真正代表「包含边框与内边距在内的总宽度」，70% + 30% = 100%，完美贴合父容器。
⚠️ 关于高度问题的说明height: 100% 在浮动上下文中通常无效，因为浮动元素脱离文档流，其高度不会自动继承父容器高度（除非父容器有显式高度且清除浮动）。若需视觉上等高，推荐以下方案：
-
方案一（推荐）：放弃
float，改用现代布局（如 Flexbox）：.container { display: flex; gap: 0; /* 可选间距 */ } article { flex: 7; } /* 等比分配：70% */ aside { flex: 3; } /* 等比分配：30% */ -
方案二（兼容旧项目）：为
.container添加overflow: hidden或伪元素清除浮动，再配合min-height或 JS 动态同步高度（不推荐，复杂且非响应友好）。
? 总结建议：
-
box-sizing: border-box是浮动布局的必备前提，应作为 CSS 重置的一部分全局启用； -
float已属过时布局技术，仅建议用于学习或维护遗留代码；新项目请优先采用display: flex或display: grid； - 百分比宽度 +
border-box是实现真正响应式的基石，无需“微调到 29.6%”这类脆弱 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
