使用float与margin可实现传统多列布局，通过设置元素浮动及外边距控制排列与间距，配合清除浮动避免高度塌陷，适用于旧项目维护。
使用 CSS 的 float 与 margin 配合，可以在不依赖现代布局方式（如 Flexbox 或 Grid）的前提下，实现较为灵活的页面结构。虽然 float 已逐渐被新布局取代，但在维护旧项目或需要兼容老浏览器时，掌握其与 margin 的配合技巧仍具实用价值。
利用 float 实现多列布局
通过设置元素的 float 属性，可以让块级元素脱离正常文档流并靠向一侧，从而实现横向排列。
例如：创建两栏布局将左侧内容左浮动，右侧内容也左浮动，并为它们设置合适的宽度。
- 给左侧栏设置 float: left; width: 70%;
- 右侧栏设置 float: left; width: 30%;
- 两者总宽度不超过 100%，避免换行
此时两个元素并排显示，形成基本的多列结构。
立即学习“前端免费学习笔记（深入）”；
使用 margin 控制间距与避让
float 容易引发重叠或贴边问题，合理使用 margin 可以优化视觉效果。
- 在浮动元素上设置 margin-right 或 margin-left 来增加列间间距
- 对非浮动元素（如后续内容块），添加 margin-top 或 margin-bottom 防止紧贴浮动区域
- 若文本环绕图片，可为图片设置 margin 让文字保持适当距离
清除浮动带来的影响
浮动元素脱离文档流，可能导致父容器高度塌陷或后续内容错位。使用 margin 无法解决该问题，必须结合清除机制。
- 在浮动元素后添加一个清浮动元素：<div style="clear:both;"></div>
- 或为父容器设置 overflow: hidden; 触发 BFC 包含浮动
- 也可使用伪元素清除法：.clearfix::after { content:""; display:block; clear:both; }
这样能确保布局稳定，margin 设置的外边距才能正确生效。
避免 margin 重叠与意外换行
使用 float 布局时，需注意以下常见问题：
- 不要让所有浮动元素的总宽度 + margin 超过父容器宽度，否则会换行
- 垂直方向上的 margin 在某些情况下可能合并，尤其是在相邻非浮动块之间
- 浮动元素之间的水平 margin 不会合并，但上下 margin 正常起作用
建议用盒模型计算尺寸时包含 padding 和 border，必要时使用 box-sizing: border-box; 简化控制。
基本上就这些。float 搭配 margin 虽然灵活，但需要手动处理细节。在新项目中推荐优先使用 Flex 或 Grid，而在老项目维护中，理解这套组合逻辑仍很关键。
