float属性通过left、right实现元素左右浮动，使块级元素并排显示，常用于图文环绕和多列布局；需注意父容器高度塌陷问题，可用clear:both、overflow:hidden或伪元素clearfix清除浮动影响；尽管现代布局推荐flex和grid，但float在维护旧项目和特定场景中仍有应用价值。
使用CSS的float属性可以实现元素的左右浮动布局，让块级元素并排显示。这种方法常用于网页中需要文字环绕图片、创建多列结构等场景。
float的基本取值
float属性有四个常用值：
- left：元素向左浮动，其他内容环绕其右侧
- right：元素向右浮动，其他内容环绕其左侧
- none：默认值，不浮动
- inherit：继承父元素的浮动设置
左右浮动并排布局示例
通过设置两个块元素分别向左和向右浮动，可以让它们在同一行内水平排列：
左侧内容
右侧内容
这两个div会尽可能地贴靠容器的左右边缘，并处于同一行（前提是容器足够宽）。
立即学习“前端免费学习笔记（深入）”；
清除浮动的影响
浮动元素会脱离正常文档流，可能导致父容器高度塌陷或后续元素错位。可通过以下方式清除浮动：
.clearfix::after {content: "";
display: block;
clear: both;
}
实际应用注意点
虽然float曾是实现多列布局的主要手段，但在现代开发中更推荐使用flex或grid布局。不过了解float仍有必要，特别是在维护旧项目或处理图文混排时。
确保浮动元素总宽度不超过父容器，否则可能换行。同时记得处理浮动带来的布局影响，避免页面结构错乱。
基本上就这些，float用起来简单，但细节需要注意。
