float使元素脱离文档流并左/右浮动，文字环绕其周围，但父容器高度塌陷；修复需触发BFC、空元素清除或伪元素清除。
float 属性的基本行为是什么
float 让元素脱离文档流，向左或右移动，直到碰到父容器边缘或另一个浮动元素的边界。它不改变其他非浮动元素的布局位置（它们会“无视”浮动元素的存在），但文字内容会环绕浮动元素——这是最常被忽略的底层逻辑。
-
float: left和float: right是仅有的有效值（float: none用于清除） - 行内元素设置
float后会自动变成块级框（可设宽高、内外边距） - 浮动元素不会撑开父容器高度，这是布局塌陷的根源
为什么父容器高度塌陷？怎么修复
父容器内部只有浮动子元素时，其计算高度为 0，因为浮动元素已脱离文档流。常见错误是直接给父容器加 height 硬撑，这不可维护。
修复方式有三种，按推荐顺序：
- 使用
overflow: hidden或overflow: auto（触发 BFC，简单有效，但注意可能截断阴影或下拉菜单） - 在父容器末尾添加一个清除浮动的空元素：
<div style="clear: both"></div>
- 用伪元素清除（现代推荐）：
.clearfix::after { content: ""; display: table; clear: both; }，然后给父容器加class="clearfix"
float 实现两栏/三栏布局的关键细节
纯 float 布局现在虽被 Flex/Grid 取代，但老项目或兼容 IE8 仍需掌握。核心是：浮动侧边栏 + 非浮动主内容。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏先写在 HTML 中，并设置
float: left（或right），宽度固定 - 主内容区域不浮动，只用
margin预留侧边栏空间（如margin-left: 200px） - 若主内容也浮动，必须确保所有列都浮动且总宽度 ≤ 100%，否则最后一列会掉到下一行
- 所有浮动列需声明
width，否则默认 100% 宽度导致无法并排
clear 属性和常见误用场景
clear 不是“清除浮动效果”，而是控制元素不能紧贴在某个方向的浮动元素旁边。它影响的是当前元素自身的位置。
-
clear: left→ 元素上边框必须低于左侧所有浮动元素的底边 -
clear: both→ 同时避开左右两侧浮动元素（最常用） - 错误做法：给浮动元素自己加
clear（无效，它只对块级盒生效，且作用于后续兄弟元素） - 典型误用：在导航菜单项上加
float: left后，忘记给整个ul清除，导致下方内容上移贴住菜单
浮动不是布局神器，它是文本环绕工具。把它当布局手段用，就得时刻想着“怎么把父容器拉回来”“怎么避免文字钻进不该去的地方”。这些补救动作，恰恰是它被 Flex 替代的根本原因。
