浮动属性用于实现文字环绕图片及多列布局，通过float:left或float:right使元素脱离文档流并左/右对齐，导致父容器高度塌陷和后续元素错位；常用.clearfix::after等方法清除浮动；现代布局推荐使用Flexbox或Grid替代。
浮动（float）是CSS中一个用于控制元素排列方式的属性，最初设计是为了实现文字环绕图片的效果。随着网页布局的发展，浮动也被广泛用于创建多列布局，尽管现在有更现代的布局方式如Flexbox和Grid，理解浮动依然重要，特别是在维护旧项目时。
浮动的基本作用
当一个元素设置了 float: left 或 float: right，它会脱离正常的文档流，并尽可能地向容器的左侧或右侧靠拢，其他内容（如文字、内联元素）会围绕在它的周围。
常见用途包括：
- 让图片右浮动，文字自然环绕在左侧
- 多个块级元素通过浮动并排显示，形成行布局
浮动带来的影响
浮动元素会带来两个主要问题：父容器高度塌陷和后续元素错位。
立即学习“前端免费学习笔记（深入）”；
例如，如果父元素只包含浮动的子元素，默认情况下它会“看不见”这些子元素的高度，导致自身高度变为0，这就是所谓的“高度塌陷”。
解决方法通常有：
- 使用 clear: both 在父容器末尾添加一个清除浮动的元素
- 给父容器设置 overflow: hidden 或 overflow: auto，触发BFC（块级格式化上下文）来包含浮动
- 使用伪元素清除浮动（推荐方式）：
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后将这个类加到需要包含浮动的父元素上。
现代布局中的替代方案
虽然浮动曾是布局的主流手段，但现在更推荐使用Flexbox或Grid来实现复杂布局。它们更灵活、更易控制，不会产生浮动带来的副作用。
比如用 display: flex 可以轻松实现等高、居中、自动分配空间等效果，无需担心清除浮动的问题。
基本上就这些。理解浮动有助于读懂老代码，但在新项目中建议优先考虑更现代的布局方式。
