浮动元素遵循标准盒模型，其尺寸由content、padding、border、margin共同决定；设置float后仍按此规则计算空间占用。默认width仅含content，padding和border会额外增加宽度，除非使用box-sizing: border-box。margin控制浮动元素间水平间距，左右margin叠加形成间隔，上下margin在未清浮时可能无效，且浮动元素间无外边距合并。padding扩大内容可视区并影响总宽（content-box下），背景延伸至padding区域，过大可能导致换行。border同样增加整体尺寸，多元素并排时边框总宽需计入容器容量。推荐使用box-sizing: border-box统一尺寸计算，使width包含padding和border，便于精准布局。尽管Flex和Grid逐步替代浮动，但在旧项目中掌握盒模型对避免错位、溢出等问题仍至关重要。
浮动布局和盒模型是CSS中两个核心概念，它们在网页排版中紧密关联。理解它们之间的关系，特别是margin、padding、border如何影响浮动元素的布局，对实现精确控制至关重要。
浮动元素依然遵循盒模型
每个元素在页面中都是一个盒子，由content、padding、border、margin四部分组成。即使设置了float: left或float: right，元素仍然按照标准盒模型计算尺寸。
注意：默认情况下，元素的width和height只包含content区域。padding和border会额外增加元素的实际占用空间，除非使用box-sizing: border-box。
margin与浮动布局中的间隙控制
margin用于控制浮动元素与其他元素之间的距离。在浮动布局中，相邻浮动元素之间的间距由各自的margin决定。
立即学习“前端免费学习笔记（深入）”；
例如：两个左浮动的div，若各设置margin-right: 10px，则它们之间会有20px的水平间隔（各自贡献10px）。
padding对内容区域的影响
padding定义内容与border之间的内边距。在浮动元素中，padding会扩大可视区域，但不会影响其他浮动元素的对齐基准。
- padding会增加元素的整体宽度（在box-sizing: content-box下）
- 背景色或背景图会延伸至padding区域
- 过大的padding可能导致浮动换行，超出容器宽度
建议使用开发者工具查看实际盒模型尺寸，避免因padding导致布局错乱。
border参与整体尺寸计算
border围绕在padding外侧，其宽度同样计入元素总宽高。三个浮动子元素并排时，若每个都有2px边框，则总占用宽度比无边框时多出12px（左右各2px × 3个元素）。
使用box-sizing: border-box可让border和padding包含在设定的width之内，更便于控制布局。例如：
width: 33.33%; padding: 10px; border: 2px solid #000; box-sizing: border-box;
此时元素总宽度仍为33.33%，无需手动减去padding和border。
基本上就这些。浮动虽逐渐被Flex和Grid取代，但在老项目或特定场景中仍有应用。掌握盒模型各部分如何影响浮动布局，能有效避免错位、溢出等问题。关键是理解尺寸叠加逻辑，并善用box-sizing统一计算方式。
