CSS盒模型与浮动结合可实现传统布局。盒模型包含content、padding、border、margin，默认width仅含content，设置box-sizing: border-box后更易控制尺寸；浮动（float）使元素脱离文档流，实现文字环绕或两栏布局，但会导致父容器高度塌陷及后续元素错位；通过clear属性或clearfix技巧可清除浮动影响；典型应用如左侧固定、右侧自适应布局：侧边栏设float: left，主内容用margin-left避让，配合box-sizing确保尺寸精确。虽现代布局多用Flexbox与Grid，理解float与盒模型对维护旧项目仍具意义。
在网页布局中，CSS盒模型与浮动（float）是早期最常用的布局手段之一。虽然现代开发更多使用Flexbox和Grid，但理解float与盒模型的结合应用，对维护旧项目或深入掌握CSS布局原理仍至关重要。
盒模型基础：内容、内边距、边框与外边距
CSS盒模型是每个HTML元素的基础结构，包含四个部分：
- content：元素的实际内容，如文字或图片
- padding：内容与边框之间的空间
- border：围绕内容和内边距的边框
- margin：元素与其他元素之间的外部间距
默认情况下，width和height只包括content。若设置box-sizing: border-box，则width会包含padding和border，更便于布局控制。
浮动布局原理：float与文档流的影响
当元素设置float: left或float: right时，它会脱离正常文档流，向指定方向靠拢，其他内容会围绕其排列。常用于实现文字环绕图片或多列布局。
浮动带来的常见问题包括：
- 父容器无法自动撑高（高度塌陷）
- 后续元素被浮动元素影响位置
例如两个div分别设置float: left，它们会在同一行显示，前提是容器宽度足够。
清除浮动：clear的应用与clearfix技巧
为防止元素受到前面浮动的影响，可使用clear: both（或left/right）来强制换行显示。
常用方法包括：
- 添加空元素并设置
style="clear:both" - 使用伪类::after实现clearfix
推荐使用clearfix方案：
.clearfix::after {
content: "";
display: block;
clear: both;
}
将该类应用于浮动子元素的父容器，即可解决高度塌陷问题。
实践案例：两栏布局中的盒模型与浮动配合
假设要创建一个左侧固定宽度、右侧自适应的两栏布局：
<div class="container clearfix"> <div class="sidebar">左侧菜单</div> <div class="main-content">主要内容</div> </div>
CSS样式如下：
.container {
width: 100%;
box-sizing: border-box;
}
.sidebar {
float: left;
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background: #f0f0f0;
}
.main-content {
margin-left: 220px; /* 预留侧边栏+间距 */
padding: 10px;
}
这里通过float: left让侧边栏左浮，主内容用margin-left避开重叠。同时合理计算盒模型尺寸，避免溢出。
基本上就这些。掌握盒模型的尺寸计算和浮动的排列规则，再配合clear清除影响，就能稳定实现传统浮动布局。虽已逐步被现代布局取代，但仍是前端基础的重要一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
