Float 属性用于实现文字环绕和多列布局，使元素脱离文档流并左/右浮动，导致文本环绕、块级元素重叠及父容器高度塌陷；常用值为 left、right 和 none；常见问题通过 clear 清除浮动或使用 clearfix 类解决，现代布局推荐采用 flexbox 或 Grid。
float 属性是 css 中一个经典的布局工具，最初设计用于实现文字环绕图片的效果。随着网页设计的发展，它曾被广泛用于创建多列布局。理解 float 的作用机制及其对页面布局的影响，有助于更好地掌握传统布局方式，并避免常见问题。
float 会影响哪些布局
当元素设置 float 后，会脱离正常的文档流，向左或向右移动，直到其边缘紧贴父容器的边界或另一个浮动元素的边缘。这种行为会直接影响周围内容的排列方式：
- 文本和其他内联内容会围绕浮动元素排列 —— 这是 float 最原始的设计目的，比如图片浮动时，文字会沿其侧边显示。
- 块级非浮动元素会忽略浮动元素所占的空间 —— 导致可能出现重叠或布局错乱。
- 父容器可能无法正确包裹浮动子元素 —— 引起“高度塌陷”，即父元素高度计算不包含浮动子元素。
- 多个浮动元素会按顺序排列在同一行（若空间足够），否则会换行显示，常被用于模拟多列布局。
float 的常用取值及效果
float 支持几个基本值，不同值产生不同的定位行为：
- left：元素向左浮动，内容在其右侧和下方流动。
- right：元素向右浮动，内容在其左侧和下方流动。
- none：默认值，不浮动，元素保持在正常文档流中。
- inherit：继承父元素的 float 值（较少使用）。
浮动带来的常见问题与解决方案
尽管 float 曾经是布局的核心手段，但它也引入了一些典型的布局难题：
立即学习“前端免费学习笔记（深入）”；
- 高度塌陷 —— 父元素无法撑开，解决方法包括使用 clear 清除浮动，或通过 BFC（块格式化上下文）包裹浮动元素。
- 清除浮动的需求 —— 使用 clear: both; 可防止元素出现在浮动元素旁边。通常在浮动序列后添加一个空元素并应用 clear，或使用伪元素清除法（如 .clearfix）。
- 现代替代方案更优 —— 目前推荐使用 Flexbox 或 Grid 布局代替 float 实现复杂结构，代码更简洁且不易出错。
实用技巧：clearfix 方法示例
为避免每次都要手动添加清除元素，可定义通用 clearfix 类：
.clearfix::after { content: ""; display: table; clear: both; }
将该类应用于包含浮动子元素的父容器，即可自动清除内部浮动，恢复正常的高度计算。
基本上就这些。虽然现在多数布局已转向 Flex 和 Grid，但在维护旧项目或处理图文混排时，了解 float 的影响依然很有必要。关键在于清楚它如何改变文档流以及如何正确清除浮动。