float元素“看不见”是因为它完全脱离普通文档流，后续块级元素布局时无视其存在；它仍参与行内格式化上下文实现文字环绕，但不参与块级容器高度计算，导致父容器塌陷。
float元素为什么“看不见”了——脱离文档流的真实含义
因为 float 会让元素**完全退出普通文档流（normal flow）**，后续块级元素会无视它的存在，从它原本占据的位置开始布局，就像它没出现过一样。这不是“隐藏”，而是“注销注册”——浏览器渲染时直接跳过它在流中的占位资格。
常见错误现象：父容器高度塌陷、文字环绕后下方元素上移覆盖内容、相邻<div>紧贴顶部而非按顺序排列。
<ul>
<li>浮动元素仍参与行内格式化上下文（IFC），所以能和文字并排；但它已不属于块级格式化上下文（BFC）里的流式位置计算范畴</li>
<li>
<code>display 值不影响脱标行为——哪怕设成 display: block，只要 float 不是 none，就一定脱标
float 已不用于整体页面结构，但仍在某些图文混排、历史代码或打印样式中出现为什么clear不能“清掉”浮动本身——只影响后续元素的定位
clear 不是清除浮动效果，而是告诉当前元素：“你自己的上边界，必须低于指定方向所有浮动元素的下边缘”。它不改变已浮动元素的位置，也不让它们回归文档流。
使用场景：防止段落文字被右浮动图片“切掉开头”，或让按钮避开左浮动导航栏。
立即学习“前端免费学习笔记（深入）”；
-
clear: left→ 当前元素下边距必须低于所有float: left元素的底部 - 若同时存在左右浮动，
clear: both才生效；单写clear: left对右浮动无效 -
clear只对块级元素有效，display: inline元素设了也无反应
父容器塌陷的本质——没有BFC触发，高度计算不包含浮动子元素
父容器高度为0，不是因为“忘了算”，而是标准规定：**计算块级容器高度时，不把脱离文档流的子元素纳入高度贡献范围**。这是CSS 2.1规范明确写的逻辑。
修复的关键不是“拉高父容器”，而是让它进入一个能“看见”浮动子元素的上下文——即创建BFC。
- 触发BFC的方式很多，最常用的是：
overflow: hidden、overflow: auto、display: flow-root（推荐，语义清晰且无副作用） - 避免用
float自身触发BFC（比如给父元素也加float），这会让整个父容器也脱标，引发新问题 -
display: flex或display: grid的父容器天然BFC，但此时子元素的float会被忽略（规范规定：浮动在flex/grid容器中无效）
float在现代CSS中的实际存活位置——别误用，但要懂它在哪起作用
它没消失，只是退居二线：主要活在需要“文字绕排”的场景，以及部分打印样式表（@media print）中。浏览器依然完整支持，但W3C已将其标记为“legacy layout mode”。
- 响应式布局中慎用——
float不响应宽度变化，容易导致文字溢出或错位 - 与
position: absolute混用极危险：两者都脱标，但定位机制完全不同，叠加后行为难以预测 - 如果只是为了左/右对齐，优先用
text-align（内联内容）、margin-left: auto（块级）、或justify-content（flex）——更可控，不破坏流
真正容易被忽略的点是：浮动元素虽然脱标，但它依然影响行框（line box）的高度，所以文字环绕时，行高可能被意外撑开；这个细节在调试垂直对齐问题时经常成为隐性干扰源。
