float使元素半脱离文档流，向左或右浮动并影响文字环绕；需用clear清除以避免塌陷；现多被Flexbox和Grid替代，仅用于图文环绕等特定场景。
float 属性让元素脱离标准文档流，向左或向右“漂”到父容器边缘或相邻浮动元素旁边，同时保留对文本的环绕影响——它不是完全隐身，而是“半脱离”：普通块级元素会无视它的存在，但文字和行内内容会自动绕开它。
设置 float: left 或 float: right 后，元素会：
尽管 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: left —— 元素上边距会下移，直到左侧无浮动元素clear: both —— 最常用，左右两侧都避开浮动框::after 伪元素清除（BFC 触发）根本问题在于它设计初衷并非用于复杂页面结构：