浮动布局通过Float实现多列排列，但受box-sizing影响尺寸计算；设为border-box可避免因padding和border导致的换行问题，提升布局稳定性。
浮动布局（Float Layout）和 box-sizing 是css中两个重要但容易被忽视的概念，它们在实际布局中相互影响，尤其在旧式布局或需要兼容老浏览器时尤为关键。
浮动布局的基本原理
浮动最初设计用于实现文字环绕图片的效果，但后来被广泛用于创建多列布局。当元素设置 float: left 或 float: right 时，它会脱离正常的文档流，并向指定方向移动，直到碰到父容器边缘或其他浮动元素。
常见用法如下：
box-sizing 的作用
box-sizing 属性决定了元素的宽度和高度如何计算。它有两个常用值：
立即学习“前端免费学习笔记（深入）”；
- content-box：默认值。width 和 height 只包含内容区域，不包括 padding 和 border
- border-box：width 和 height 包含内容、padding 和 border
例如：一个元素设置 width: 100px, padding: 10px, border: 5px solid，则：
- 使用 content-box 时，总宽度为 100 + 20 + 10 = 130px
- 使用 border-box 时，内容区自动压缩为 70px，总宽度仍为 100px
浮动与 box-sizing 的交互影响
当浮动元素设置了不同的 box-sizing 时，布局表现会有明显差异，尤其是在等宽分栏场景下。
比如两个 div 浮动并排，父容器宽度 300px，每个子元素设为 width: 50%：
- 若 box-sizing 为 content-box，且有 padding 或 border，实际宽度将超过 150px，导致第二列换行
- 若设为 border-box，则即使有内边距或边框，宽度仍控制在 150px 内，保持同行显示
因此，在浮动布局中推荐统一设置：
*, *::before, *::after { box-sizing: border-box; }
实际建议与注意事项
虽然现代开发更多使用 Flexbox 或 Grid，但在维护旧项目或需要支持低版本浏览器时，浮动仍会遇到。
- 始终为浮动布局的元素设置 border-box，避免意外溢出
- 注意父容器未撑开的问题，可通过 overflow: hidden 或伪元素清除浮动
- 不同 box-sizing 混用会导致对齐错乱，全局统一更安全
- 测试时关注 padding 和 border 是否计入宽度，防止响应式断行
基本上就这些。理解 box-sizing 如何影响尺寸计算，能显著提升浮动布局的可控性。不复杂但容易忽略。