Float导致父容器高度塌陷是因为浮动元素脱离普通文档流，父容器无法感知其尺寸；解决方式包括触发bfc（如overflow:hidden）或伪元素清除浮动（::after{content:””;clear:both}）。
float 为什么会让父容器高度塌陷
因为 float 元素脱离了普通文档流，父容器在计算高度时“看不见”它。这不是 bug，是规范行为——浮动元素本就不参与块级盒的高度计算。
- 常见错误现象：
div包着几个float: left的图片或文字，结果父div高度为 0，背景色/边框消失 - 最直接的修复方式：给父容器加
overflow: hidden或overflow: auto（触发 BFC） - 更可控的做法是用伪元素清除浮动：
::after { content: ""; display: table; clear: both; }，兼容性好且不干扰溢出逻辑 - 注意
display: flex或display: grid容器里float会失效——它们不建立 BFC，也不响应clear
图文环绕时 float 和 inline-block 哪个更稳
float 是唯一原生支持文字自动绕排的 css 机制；inline-block 只能靠行内换行挤位置，无法实现真正的“文字包裹图片轮廓”效果。
- 使用场景：新闻正文里左图右文、博客中插入小图标后文字环绕——必须用
float: left/right+margin控制间距 -
float的文字环绕是浏览器原生行为，无需 js 计算；inline-block在多段落下容易因换行导致对齐错乱 - IE6–8 对
float支持完整，但对inline-block需要 hack（如zoom: 1） - 现代写法中，如果只要求“图片在左、文字在右”，
display: flex更简洁；但要文字真的“绕着图片走”，还是得回到float
clear 属性到底清什么、怎么清才不误伤
clear 清的是“前面浮动元素造成的行盒偏移”，不是清浮动本身。它让当前元素向下移动，直到其上边界避开指定方向的浮动元素边界。
- 常见错误现象：在浮动列表后加一个
div，没加clear就跑到了列表右侧空白处 -
clear: both最常用，但若只有一侧有浮动，用clear: left或clear: right更精准，避免无谓下移 - 不要给浮动元素自己加
clear——它对自身无效，还可能干扰后续布局 - 用
clear做分隔线时注意：它依赖前一个浮动元素的存在，如果前面没浮动内容，clear不起作用
float 在 Flex/Grid 时代还有没有不可替代的用途
有。主要是两个老但真实存在的需求：shape-outside 文字环绕任意形状，以及某些 CMS 输出的旧 HTML 模板强制依赖 float 结构，改起来成本远高于保留。
立即学习“前端免费学习笔记（深入）”；
-
shape-outside必须配合float才能生效，这是目前唯一能让文字按 SVG 路径或图片 alpha 通道环绕的方式 - 很多企业内部长期运行的内容系统（比如 wordpress 老主题、Drupal 7 模块）仍用
float实现三栏布局，强行替换成 Grid 可能破坏编辑器预览逻辑 - 性能上，
float触发的重排范围小，比某些复杂 Grid 布局更轻量——但仅限简单图文环绕场景 - 别为了“淘汰 float”而删掉它：只要没引发塌陷、没干扰语义、没卡死在 IE8，它就还在干它该干的活
真正容易被忽略的，是 float 和 vertical-align 在同一上下文里的冲突——当浮动元素里嵌了 inline 内容，又设置了 vertical-align，渲染结果常和预期不符，这时候得先确认是否真需要两者共存。