浮动属性float用于元素靠左或靠右排列，实现文字环绕或布局，取值有left、right、none、inherit；浮动元素脱离文档流，导致父容器塌陷，需用clear:both或伪元素clearfix清除。
浮动属性 float 是 CSS 中用于控制元素在父容器中靠左或靠右排列的一种布局方式。它最初设计用于实现文字环绕图片的效果，后来被广泛用于多列布局的构建。虽然现代布局更多使用 Flexbox 或 Grid，但理解 float 仍对维护旧代码和掌握 CSS 布局演变有帮助。
float 的基本取值
float 属性可以设置以下几种常用值：
- left：元素向左浮动，其他内容围绕其右侧和下方显示。
- right：元素向右浮动，其他内容围绕其左侧和下方显示。
- none：默认值，元素不浮动。
- inherit：继承父元素的浮动设置（较少使用）。
示例：
.box1 { float: left; }
.box2 { float: right; }
浮动元素的特点
当一个元素设置了 float，它会脱离正常的文档流，尽可能往指定方向移动，直到碰到父容器边缘或其他浮动元素。
立即学习“前端免费学习笔记（深入）”；
- 块级元素浮动后仍保持块级特性，但会收缩到内容宽度（除非设置 width）。
- 多个同方向浮动的元素会依次排列，直到一行放不下时换行。
- 文本、内联元素会围绕在浮动元素周围，这是 float 最初的设计目的。
清除浮动（Clear Floats）
由于浮动元素脱离文档流，可能导致父容器高度塌陷（无法包含子浮动元素），因此需要“清除浮动”。
使用 clear 属性来控制元素是否允许出现在浮动元素旁边：
- clear: left;：不允许左侧有浮动元素。
- clear: right;：不允许右侧有浮动元素。
- clear: both;：左右都不允许有浮动元素。
常见清除方法之一是在浮动元素末尾添加一个清除元素：
<div class=”container”>
<div class=”box” style=”float: left;”>Box 1</div>
<div class=”box” style=”float: left;”>Box 2</div>
<div style=”clear: both;”></div>
</div>
另一种推荐做法是使用伪元素清除法（clearfix）：
.clearfix::after {
content: “”;
display: block;
clear: both;
}
然后将 clearfix 类应用到父容器上即可防止高度塌陷。
基本上就这些。float 虽然简单，但容易引发布局问题，关键是理解它脱离文档流的特性以及如何正确清除。