盒模型由内容、内边距、边框和外边距组成，float使元素脱离文档流实现横向排列，常配合margin控制间距，需处理父容器高度塌陷与换行问题，通过clear或BFC清除浮动，掌握这些原理有助于理解传统布局机制。
在CSS布局中，盒模型和浮动（float）是早期网页排版的核心技术。虽然现代开发更多使用Flexbox或Grid，但理解float与margin在盒模型中的协作方式，对维护旧项目或掌握布局原理仍非常重要。
盒模型基础：内容、内边距、边框与外边距
CSS盒模型将每个元素视为一个矩形盒子，由四个部分组成：
- content：实际内容区域，如文字或图片
- padding：内边距，内容与边框之间的空间
- border：边框，围绕内边距的线条
- margin：外边距，盒子与其他元素之间的空白
默认情况下，width和height仅作用于content区域，padding和border会额外增加元素总尺寸。可通过box-sizing: border-box让width包含padding和border，更便于控制布局。
浮动布局原理与常见用法
float属性最初用于实现文字环绕图片效果，后来被广泛用于多列布局。设置float后，元素脱离正常文档流，向左或右移动，直到碰到父容器边缘或其他浮动元素。
立即学习“前端免费学习笔记（深入）”；
常用值包括：
- float: left：元素靠左浮动
- float: right：元素靠右浮动
- float: none：默认值，不浮动
多个浮动元素会依次排列在同一行，若剩余空间不足则自动换行到下一行。
浮动结合margin实现间距控制
在浮动布局中，margin是控制元素之间距离的主要手段。由于浮动元素脱离标准流，垂直方向的margin可能不会按预期堆叠，需特别注意水平与垂直方向的行为差异。
关键技巧：
- 为浮动元素设置左右margin可创建列间间隙，例如两栏布局中每栏右侧加10px margin
- 上下margin在同向浮动元素间通常有效，但遇到清除浮动（clear）时需重新计算
- 避免左右margin过大会导致最后一项换行，应确保所有浮动元素总宽度（含margin、padding、border）不超过父容器
示例：两个宽度48%的div，分别向左浮动，中间通过2%的margin分隔，可实现简单响应式双栏布局。
清除浮动与外边距塌陷处理
浮动会导致父容器高度塌陷——如果父元素未设置高度且子元素全部浮动，父元素可能显示为无高度。解决方法包括：
另外，相邻块级元素的上下margin会发生合并（margin collapse），但在浮动元素之间一般不发生塌陷，因此浮动布局中垂直间距更可控。
基本上就这些。掌握盒模型尺寸计算、合理运用float与margin配合，并正确清除浮动，就能稳定构建传统浮动布局。虽已逐步被新布局取代，但其逻辑仍是前端基础的一部分。
