Float是文本环绕工具而非布局方案，仅适用于图文混排；用于布局会导致文档流脱离、父容器塌陷等问题，现代应优先使用flex或grid。
浮动（float）不是布局方案，是文本环绕工具；用它做页面布局会掉进坑里，除非你明确知道在修复什么。
float:left 和 float:right 的真实用途
它们本意是让图片或元素像印刷排版那样“让文字绕排”，比如左图右文。现代 css 中，float 唯一合理使用场景是内联内容中的图文混排（如文章里的小图标+说明文字），而不是构建导航栏、卡片网格或三栏布局。
- 一旦对块级容器设
float，它就脱离文档流，父容器高度塌陷——这不是 bug，是设计如此 -
float会触发 BFC（块格式化上下文），但这是副作用，不是你应该依赖的布局机制 - IE6/7 下
float有双倍边距、3px Bug 等问题，现在虽少遇，但若需兼容老系统，必须加display:inline或*zoom:1
清除浮动（clear）为什么总写不对
clear 不是“清空 float”，而是“指定该元素不能紧贴某个方向的浮动元素”。很多人误以为加了 clear:both 就万事大吉，结果发现父容器还是塌陷——因为 clear 只影响自身位置，不恢复父容器的包含性。
- 常见错误：在最后一个浮动子元素上加
clear:both→ 父容器依然塌陷 - 正确做法之一：在父容器末尾插入一个空
<div style="clear:both"></div>（语义差但有效） - 更优解：给父容器设置
overflow:hidden或display:flow-root（后者是标准方式，IE 不支持） -
display:flow-root是目前最干净的“BFC 触发器”，比overflow:auto更安全（不会意外出现滚动条）
float 和 inline-block 混用时的换行和间隙
把 float:left 和 display:inline-block 放在同一父容器里，极易出现不可控的垂直对齐或水平间隙——因为它们响应的是不同渲染规则：前者脱离流，后者仍受 inline 基线影响。
立即学习“前端免费学习笔记（深入）”；
-
inline-block元素间的 HTML 换行符会被渲染成空格，导致约 4px 间隙；float则无视空白符 - 两者混用时，
vertical-align对float无效，但会影响inline-block，造成错位 - 若真要并排，统一用
float或统一用display:flex；不要一半 float 一半 inline-block - Flexbox 出来后，
float在布局中已无不可替代性；哪怕只支持 IE10+，也优先选display:flex
float 动画和 transition 失效的原因
float 不是可动画属性，CSS 动画或 transition 对它完全无效。你看到的“浮动元素移动”，其实是靠 js 修改 left/transform 实现的，或者误以为 margin 变化是 float 在动。
- 写
transition: float 0.3s—— 浏览器直接忽略，控制台无报错，但没效果 - 想实现“滑入”效果？用
transform: translateX()+transition，别碰float - JS 中通过
getComputedStyle(el).float获取值，在 firefox 返回left/right，chrome/safari 返回""（空字符串）——跨浏览器取值要兜底
float 的复杂点不在语法，而在它牵扯的文档流、BFC、渲染顺序、历史兼容逻辑——这些隐性链条一旦断裂，调试成本远高于重写为 flex 或 grid。真正需要它的时候很少，但每次用错，都得花两倍时间去查父容器为什么没高度。