盒模型与浮动布局需配合margin控制间距。浮动元素脱离文档流，通过margin预留空间避免重叠，如左浮动间设margin-right；文本环绕时用margin-left避开侧边栏；父容器塌陷可通过overflow:hidden或伪元素clear:both修复。
在CSS布局中，盒模型和浮动（float）是传统布局方式的重要组成部分。虽然现代开发更多使用Flexbox或Grid，但在维护旧项目或特定场景下，理解float与margin如何协调依然很关键。
理解盒模型对浮动元素的影响
每个元素都遵循盒模型：内容（content）、内边距（padding）、边框（border）、外边距（margin）。当设置float: left/right时，元素会脱离正常文档流，向指定方向靠拢，其他内容会围绕它排列。
浮动元素本身的盒模型仍然生效，但其与其他元素的间距控制必须依赖margin来调整。常见问题包括：
- 两个相邻浮动元素之间没有间距——需手动添加margin
- 文本内容“挤”到浮动元素下方——未用margin留出空间
- 父容器高度塌陷——子元素浮动后不占位
使用margin控制浮动元素之间的间隙
为避免浮动元素贴边，应在浮动方向上设置margin。例如多个左浮动的盒子之间想有间隔：
.box {float: left;
width: 100px;
margin-right: 10px;
}
注意最后一个元素可能不需要右边距，可使用:not(:last-child)排除：
margin-right: 10px;
}
防止文字环绕与清除浮动影响布局
非浮动块级元素若紧随浮动元素后，可能会被“挤”下去或只占据剩余空间。此时应合理使用margin预留位置，或通过清除浮动恢复布局结构。
例如左侧一个宽200px的浮动菜单，主内容区可用margin-left避开：
.sidebar {float: left;
width: 200px;
}
.main-content {
margin-left: 210px; /* 留出侧边栏+间距 */
}
如果希望元素独占一行、不受浮动影响，使用clear: both或触发BFC（如overflow: hidden）更有效。
处理父容器高度塌陷的实用方法
当所有子元素都浮动时，父容器无法自动撑高，导致背景、边框等显示异常。解决方式包括：
- 给父容器设置
overflow: hidden触发BFC - 在末尾添加清除浮动的元素：
- 使用伪元素清除（推荐）：
content: "";
display: table;
clear: both;
}
基本上就这些。float与margin配合的关键在于主动计算空间、合理设置外边距，并及时清除浮动影响。虽然现在有更好的布局方案，但在兼容老浏览器或简单排版中，这套方法依然实用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
