本文详解 float: left 与 float: right 布局中常见的宽度计算偏差和高度塌陷问题，核心解决方案是统一启用 box-sizing: border-box，确保边框和内边距纳入宽度计算，从而实现精准的百分比响应式布局。
本文详解 `float: left` 与 `float: right` 布局中常见的宽度计算偏差和高度塌陷问题，核心解决方案是统一启用 `box-sizing: border-box`，确保边框和内边距纳入宽度计算，从而实现精准的百分比响应式布局。
在传统 CSS 浮动布局中，float: left 和 float: right 曾是实现多栏排版的主流方式。但初学者常遇到两个典型问题：
-
宽度“不够用”：设置
article { width: 70% }+aside { width: 30% }后，二者仍无法并排填满父容器，甚至需手动调至29.6%才勉强对齐； -
高度失控：即使设
height: 100%，子元素也常溢出容器，或因浮动导致父容器高度塌陷（表现为背景/边框不包裹内容）。
根本原因在于 CSS 默认的盒模型（box-sizing: content-box）：元素的 width 仅指内容区宽度，而 border 和 padding 会额外增加总占用空间。例如，当 article 设置 width: 70% 且 border: 1px solid black 时，实际占用宽度 = 70% + 2px（左右边框），同理 aside 占用 30% + 2px，两者相加远超 100%，自然换行。
✅ 正确解法：全局启用 border-box 盒模型
只需为所有参与布局的元素添加 box-sizing: border-box，即可让 width 值包含 border 和 padding，使百分比计算真正“所见即所得”。
/* 推荐：全局重置，一劳永逸 */
*, *::before, *::after {
box-sizing: border-box;
}
.container {
border: 1px solid black;
width: 70%;
height: 1000px;
margin: 40px auto 0; /* 优化居中写法 */
/* 不再需要 display: block（div 默认即 block） */
}
article {
float: left;
border: 1px solid black;
width: 70%; /* 精准占满 70%，含边框 */
height: auto;
}
aside {
float: right;
border: 1px solid black;
width: 30%; /* 现在可放心写 30%，无需魔数 */
height: auto;
}⚠️ 重要补充说明：
-
清除浮动：浮动元素会脱离文档流，导致
.container高度塌陷（无法包裹article和aside）。需在容器末尾添加清除元素，或更推荐使用 BFC 触发方案：.container { overflow: hidden; /* 或 display: flow-root;（现代首选） */ } -
高度一致性：
height: 100%在浮动上下文中无效（因父容器高度未被子元素撑开）。若需等高布局，应改用 Flexbox 或 Grid（如.container { display: flex; }），或通过 JS 动态同步高度——纯 CSS 浮动本身不支持自动等高。 -
响应式建议：浮动布局已属过时方案。现代开发请优先使用
display: flex或display: grid，它们天然支持等高、响应、语义化，且无需清除浮动。
总结：box-sizing: border-box 是浮动布局的基石级修复；但长远来看，拥抱 Flexbox（如 display: flex; justify-content: space-between;）才是简洁、健壮、可维护的响应式布局正解。
