float 元素“消失”是因脱离文档流导致父容器高度塌陷；应通过 display: flow-root 等触发 bfc 解决，而非设 height；新项目优先用 flex 或 grid，float 仅适用于文字环绕图片。
float: left 和 float: right 为什么元素突然“消失”了
因为 float 会让元素脱离文档流，父容器高度塌陷——这是最常踩的坑。不是代码写错了，是没给父容器“兜底”。
- 常见错误现象：
div里塞了几个float: left的img或section，结果父div高度变成 0，背景色、边框全没了 - 典型场景：多栏卡片布局、图文混排、旧版导航菜单（注意：现在更推荐
flex或grid） - 别指望
vertical-align对float元素起作用——它只对行内/表格单元格有效 - 解决方法不是加
height（不响应式），而是触发 BFC：用overflow: hidden、display: flow-root（推荐）或伪元素清除浮动
清除浮动的三种写法，哪一种现在该用
display: flow-root 是现代、简洁、无副作用的选择；老项目兼容 IE 时才考虑其他。
-
display: flow-root：直接加在父容器上，自动建立 BFC，不干扰子元素定位，IE 不支持（Edge 17+ 支持） -
overflow: hidden：兼容性好，但会意外裁剪position: absolute子元素或box-shadow - 伪元素清除：
::after { content: ""; display: table; clear: both; }——兼容性最好，但多一层 DOM 操作，语义略重
float 和 inline-block、flex 布局混用会怎样
别混。float 和 display: inline-block 都受空格/换行影响，而 flex 完全无视这些，逻辑冲突。
- 比如给
float: left元素同时设display: flex：float失效，浏览器按 flex 规则渲染 -
float元素无法参与flex容器的对齐（justify-content、align-items对它无效） - 性能上，
float触发重排代价更高，尤其在动态增删内容时；flex更可控、更可预测
IE6–8 中 float 布局必须知道的两个细节
如果你真还在维护这类页面：双倍 margin bug 和 3px bug 不是玄学，是渲染引擎缺陷，有固定解法。
立即学习“前端免费学习笔记（深入）”；
- 双倍 margin：给
float元素设margin-left: 10px，IE6 下变成 20px —— 解法是加display: inline - 3px bug：
float元素右边/下方莫名多出 3px 间隙 —— 解法是给相邻非浮动元素设overflow: hidden或zoom: 1 - 所有 IE 浮动元素必须声明
width，否则可能撑满父容器（尤其form内嵌元素）
float 基本只用于文字环绕 img 这一种场景；其他布局需求，flex 或 grid 更稳，也更少需要查兼容表。 
