清除浮动是解决父容器高度塌陷的关键。常用方法包括：使用 clearfix::after 伪类清除浮动，推荐且不破坏结构；通过 overflow: hidden 触发 BFC 包裹浮动元素，但可能裁剪溢出内容；避免使用额外标签清除。结合 box-sizing: border-box 统一盒模型，合理设置 margin 和 width，确保多列布局总宽度不超过 100%。实际应用如两栏布局中，左栏浮动固定宽度，右栏用 margin 留白实现自适应。掌握这些技巧可有效避免布局错位，提升页面稳定性。
在CSS初级项目中，浮动（float）常用于实现文字环绕图片、多栏布局等效果。但浮动元素会脱离文档流，容易导致父容器高度塌陷，影响后续元素布局。因此，掌握如何清除浮动，并与盒模型协调使用，是构建稳定页面结构的关键。
理解浮动带来的问题
当一个元素设置 float: left; 或 float: right; 后，它会脱离正常文档流，其父容器可能无法正确包裹它，造成高度为0。这会影响后续元素的定位，出现重叠或错位。
例如：
下一个段落可能会被拉上来，因为父div实际高度为0。
立即学习“前端免费学习笔记（深入）”；
常用清除浮动的方法
以下是几种实用且兼容性好的清除浮动方式，适合初学者在项目中直接使用。
-
使用伪类 ::after 清除浮动（推荐）
给父容器添加一个隐藏的块级子元素，用CSS生成并清除两侧浮动。
.clearfix::after {
content: "";
display: block;
clear: both;
}
-
给父元素设置 overflow: hidden
简单有效，触发BFC（块级格式化上下文），使父容器包含浮动子元素。
.container {
overflow: hidden;
} 注意：如果子元素有超出部分需要显示（如弹出菜单），此方法可能裁剪内容。 - 使用额外HTML标签清除 在浮动元素末尾添加空元素并清除浮动（不推荐，增加冗余HTML）。
结合盒模型控制布局尺寸
清除浮动后，还需合理使用盒模型（box-sizing、margin、padding、border）来协调布局。
-
统一 box-sizing 为 border-box
让 padding 和 border 包含在 width/height 内，避免计算错误。
* {
box-sizing: border-box;
} -
设置 margin 实现元素间距
浮动块之间可通过 margin-right 或 margin-bottom 控制间隔。
.col {
float: left;
width: 30%;
margin-right: 5%;
background: #eee;
}
.col:last-child { margin-right: 0; } /* 最后一项去除右边距 */ - 注意总宽度不要超过父容器 多列浮动布局时，所有列的总宽度加上 margin/padding/border 必须 ≤ 100%。
实际应用示例：两栏布局
结合上述知识，实现一个左侧固定、右侧自适应的两栏布局。
固定宽度菜单
主要内容区域
基本上就这些。掌握清除浮动和盒模型配合使用，能让你在初级项目中更稳定地控制布局结构，避免常见错位问题。
