float使元素半脱离文档流，向左或右浮动并影响文字环绕；需用clear清除以避免塌陷；现多被Flexbox和Grid替代，仅用于图文环绕等特定场景。
float 属性让元素脱离标准文档流，向左或向右“漂”到父容器边缘或相邻浮动元素旁边，同时保留对文本的环绕影响——它不是完全隐身，而是“半脱离”：普通块级元素会无视它的存在，但文字和行内内容会自动绕开它。
float 的核心行为机制
设置 float: left 或 float: right 后，元素会：
- 立即脱离正常文档流，不再占据原本的块级空间
- 向上靠齐（垂直方向不下降），再水平移动至最近可用侧边
- 后续非浮动块级元素会上移填补它“空出”的位置，造成父容器高度塌陷
- 文字、span、img 等行内内容仍会感知其物理占位，自动绕排
常见使用场景与实际写法
尽管 Flexbox 和 Grid 已成现代布局主流，float 在以下场景仍有明确价值：
-
图文混排：给图片加
float: left; margin-right: 12px;，段落文字自然环绕其右侧 -
侧边栏+主内容结构：侧边栏设
float: left; width: 200px;，主内容设float: left; width: calc(100% - 200px); -
导航菜单横向排列：
nav ul li { float: left; }，配合清除避免换行错乱 -
简易瀑布流（兼容老浏览器）：多列
float: left+ 固定宽度，依赖父容器高度自适应
必须配套的 clear 清除技巧
浮动导致父容器塌陷、兄弟元素错位时，需用 clear 阻断浮动影响：
立即学习“前端免费学习笔记（深入）”；
-
clear: left—— 元素上边距会下移，直到左侧无浮动元素 -
clear: both—— 最常用，左右两侧都避开浮动框 - 推荐实践：在浮动容器末尾加一个
<div style="clear:both"></div>，或对父容器用::after伪元素清除（BFC 触发）
为什么现在少用 float 做整体布局
根本问题在于它设计初衷并非用于复杂页面结构：
- 无法精确控制对齐、分布、基线等细节
- 响应式调整困难，断点切换易引发重排错乱
- 塌陷问题需额外处理，代码冗余且易漏
- Flexbox 支持主轴/交叉轴控制，Grid 支持二维网格，语义更清晰、容错更强
