浮动元素脱离文档流致父容器高度塌陷，解决方法有三：overflow:hidden触发bfc、末尾加clear:both清除元素、伪元素::after清除（推荐）；clear仅对块级元素生效且需在浮动元素后；flex/grid中float被忽略；ie6/7存在双倍margin和haslayout问题。
浮动元素脱离文档流导致父容器高度塌陷
这是最常遇到的问题：给子元素加了 float: left 或 float: right，父容器突然“看不见”内容了，高度变成 0。原因很简单——浮动元素不再参与普通文档流计算，父容器无法感知其存在。
解决方法不是硬写 height，而是让父容器“重新感知”浮动子项：
- 用
overflow: hidden（或auto）触发 BFC，强制包含浮动元素——兼容性好，但可能意外裁剪溢出内容 - 在父容器末尾加一个清除元素：
<div style="clear: both"></div>——直观但污染 HTML 结构 - 用伪元素清除（推荐）：
::after { content: ""; display: table; clear: both; }——干净、复用性强，注意要加在父容器上
clear 属性只对块级元素生效且必须紧邻浮动元素
clear: both 不是“让后面所有东西都避开浮动”，它只影响自身所在的那个块级框，并且这个框必须出现在浮动元素的后面（DOM 顺序）、在同一 BFC 内。如果中间隔了个 position: absolute 元素，或者父容器没形成新 BFC，clear 就会失效。
常见错误现象：
- 写了
clear: both却没效果——检查该元素是否为块级（display: block或table），以及是否真的在浮动元素之后渲染 - 浮动菜单后跟一个
inline文字，clear加不上——得先把它变成块级，比如加display: block - 多层嵌套中清除失败——大概率是某一级父容器没触发 BFC，导致子级的
clear作用域被限制
float 在 Flex/Grid 布局中基本失效
一旦父容器设了 display: flex 或 display: grid，子元素上的 float 会被忽略（规范明确要求）。这不是 bug，是设计使然——Flex/Grid 是更现代、更可控的布局模型，不需要靠浮动来“借位”。
所以别在 Flex 容器里还写 float: left 想对齐，它不会起作用。该用 justify-content 就用，该用 grid-template-columns 就配。强行混用只会让你调试时怀疑 CSS 解析器坏了。
典型误用场景：
- 导航栏用 Flex 布局，又给每个
li加float: left——删掉浮动，改用flex-direction: row和gap - 卡片列表用了 Grid，再给卡片加
float排列——Grid 已经负责排列，浮动纯属干扰
IE6/7 下浮动双倍 margin bug 和 hasLayout 问题
老项目维护绕不开 IE6/7。当浮动元素有横向 margin（如 margin-left: 10px），IE6 会把它渲染成 20px；而某些情况下父容器不“有 layout”，会导致子浮动元素溢出或高度塌陷。
应对策略很具体：
- IE6 双倍 margin：给浮动元素加
display: inline（仅 IE6 识别，其他浏览器无视） - 触发 hasLayout：加
zoom: 1或height: 1%到父容器——别乱加，只在出现塌陷或错位时才用 - 不要依赖
overflow: hidden清除浮动——IE6 下可能引发文本截断，优先选伪元素方案
这些细节现在用得少，但一旦碰上遗留系统，漏掉任意一条都可能卡半天。
浮动本身没那么复杂，难的是它和文档流、BFC、渲染模式之间那些隐性的咬合关系。稍微动错一个地方，表现就全乱——尤其是嵌套清除、跨层级定位、或者和新旧布局模型混用的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
