浮动布局通过float实现多列排列，但会导致父容器塌陷；解决方法包括添加clear空元素、伪元素清除法及触发BFC，其中伪元素法最推荐。
浮动布局虽然在现代前端开发中逐渐被Flexbox和Grid取代，但在维护旧项目或学习CSS基础时，掌握Float与Clear的使用依然重要。本文通过一个实际案例，讲解如何在初级CSS项目中正确使用浮动与清除，解决常见布局问题。
浮动的基本原理与应用场景
浮动（float）最初设计用于实现文字环绕图片的效果，后来被广泛用于多列布局。元素设置float: left或float: right后，会脱离正常文档流，向指定方向靠拢，直到碰到父容器或其它浮动元素。
典型应用场景包括：
- 创建两栏或三栏页面布局
- 实现图文混排效果
- 让多个块级元素在同一行显示（替代inline-block）
浮动带来的问题：父容器塌陷
当父容器内的子元素全部浮动后，父容器无法感知子元素的高度，导致高度坍缩为0，影响后续元素布局。这是浮动布局中最常见的问题。
立即学习“前端免费学习笔记（深入）”；
例如以下结构：
左侧内容右侧内容
如果两个.box都设置了float: left，而没有清除，页脚就会“上移”到与浮动元素重叠的位置。
清除浮动的几种有效方法
解决父容器塌陷的核心是“清除浮动”，以下是几种兼容性好且实用的方法：
1. 使用clear属性添加空元素
在最后一个浮动元素后添加一个空元素，并设置clear: both：
.clearfix {
clear: both;
}
HTML中插入：。这种方法简单直接，但增加了无意义的DOM节点。
2. 使用伪元素清除法（推荐）
通过::after伪元素在容器末尾插入内容并清除浮动：
.container::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
这种方式不增加额外标签，语义清晰，是目前最常用的方案。
3. 触发BFC（块级格式化上下文）
给父容器设置overflow: hidden或overflow: auto可触发BFC，使容器包含其浮动子元素：
.container {
overflow: hidden;
}
注意：此方法可能裁剪溢出内容，需谨慎使用。
实践案例：两栏自适应布局
实现一个左侧固定宽度、右侧自适应的两栏布局：
.layout {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
width: 200px;
background: #ddd;
}
.right {
margin-left: 200px;
background: #eee;
}
关键点：
- 左侧使用float: left固定宽度
- 右侧使用margin-left留出空间，避免重叠
- 给.layout添加伪元素清除浮动，防止塌陷
基本上就这些。掌握浮动与清除的原理和处理方式，能帮助你在维护老项目时快速定位并解决布局问题。虽然后续应优先考虑Flex或Grid，但理解Float仍是CSS进阶的重要一步。
