float曾是多列布局核心，用于文字环绕和并排布局，但会导致父容器高度塌陷；需通过clear属性、触发BFC或伪元素clearfix清除浮动；现代布局推荐Flexbox和Grid，更简洁高效。
在网页布局发展过程中，float 属性曾是构建多列布局的核心手段。尽管现代开发更多使用 Flexbox 和 Grid，但在维护旧项目或理解 CSS 布局演进时，掌握 float 与清除浮动的实践仍然非常重要。
float 的基本用法
float 最初设计用于实现文字环绕图片的效果，但开发者很快将其用于创建多栏布局。
常见取值包括：
- left：元素向左浮动，其他内容环绕其右侧
- right：元素向右浮动，其他内容环绕其左侧
- none（默认）：不浮动
例如，让两个 div 并排显示：
<div class="box1">左侧区块</div> <div class="box2">右侧区块</div>
左侧区块
右侧区块
浮动带来的问题：父容器高度塌陷
当子元素浮动后，会脱离正常文档流，导致父容器无法感知其高度，从而出现高度塌陷——这是使用 float 布局最常见的问题。
例如：
.parent {
border: 1px solid #000;
}
.child {
float: left;
width: 100px;
height: 100px;
background: red;
}
此时 .parent 的高度可能为 0，即使它包含了浮动子元素。
清除浮动的常用方法
解决高度塌陷的关键是“清除浮动”，即让父容器包含所有浮动元素。
以下是几种有效的清除方式：
- 使用 clear 属性：在浮动元素后添加一个空元素，并设置 clear: both
<div style="clear:both;"></div>
.clearfix::after {
content: "";
display: table;
clear: both;
}
将该类应用于父容器，既不影响结构，又能有效清除浮动。
float 与现代布局的对比
虽然 float 曾广泛用于页面布局，但它本质上是为图文混排设计的，用于布局存在局限性：
- 需要手动清除浮动，增加复杂度
- 响应式调整困难
- 对 DOM 顺序依赖较强
相比之下，Flexbox 和 Grid 提供了更强大、直观的布局能力，无需浮动即可实现对齐、分布和自适应。
基本上就这些。理解 float 与清除浮动，不仅能应对老项目，也有助于深入理解 CSS 布局机制的演变过程。现在新项目建议优先使用 Flex 或 Grid，但在特定场景下，float 依然有其实用价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
