父容器高度塌陷是浮动元素脱离文档流导致的必然现象，应使用display: flow-root解决；浮动换行错位源于盒模型宽度超限，需设box-sizing: border-box并预留容错空间；文字环绕失控需用clear: both或BFC隔离；现代项目优先用Flex/Grid，仅在文字环绕等特定场景保留float。
父容器高度塌陷：最常踩的坑
浮动元素脱离文档流，父容器就“看不见”它们的高度，结果背景色消失、边框缩成一条线、后续元素直接顶上来——这不是 bug，是浮动的必然行为。
- 别给父容器硬写
height: 200px，一换内容就崩，且破坏响应式 - 慎用
overflow: hidden：它虽能触发 BFC 清除浮动，但会裁剪position: absolute的下拉菜单、阴影、tooltip 等溢出内容 - 推荐写法：
.parent { display: flow-root; }——专为解决此问题设计，无副作用，现代浏览器全覆盖（Chrome 64+/Firefox 61+/Safari 15.4+）
浮动换行错位：宽度计算比你想象中更脆弱
两个 float: left 元素本该并排，却一个掉到下一行？大概率不是清除没做好，而是盒模型和宽度加起来“超了”。
- 必须设
box-sizing: border-box，否则width: 50%+padding: 10px实际占满 50% + 20px，极易溢出 - 浮动元素总宽度（含 margin、border、padding）要 ≤ 父容器宽度，建议预留至少
1px容错空间，防浏览器像素四舍五入误差 - 避免对左浮动元素设
margin-left：IE6 下会双倍边距；改用margin-right分隔更安全
文字环绕失控：不是所有文本都该绕着浮图跑
图文混排时，一段 <p> 紧跟 float: left 图片，文字自动绕排很自然；但若后面还有标题、按钮、卡片，它们也跟着绕，就乱套了。
- 对不需要环绕的块级元素，直接加
clear: both（如标题前加<div style="clear:both"></div>） - 更干净的做法：给文字容器自身设
overflow: hidden或display: flow-root，形成独立 BFC，天然阻断环绕 - 注意：
clear不是“清浮动”，而是“让当前元素的上边界避开指定方向的浮动元素”——clear: left只避左浮，clear: both才全避
该不该继续用 float：现代项目里的取舍逻辑
Flex/Grid 已成主流，但 float 并未完全退场。关键看场景是否真需要它不可替代的特性。
立即学习“前端免费学习笔记（深入）”；
- 必须用 float 的场景：
float: left+margin实现新闻正文配图的文字环绕；多行不等高卡片列表（每项含标题/描述/时间），用 float 比flex-wrap更易控制基线对齐 - 该立刻替换的场景：两栏布局、导航栏、响应式栅格——
display: flex两行代码搞定，不用算宽度、不担心塌陷、支持 gap 和自动伸缩 - 兼容性提醒：若需支持 IE9 及以下，
float+.clearfix仍是唯一选择；否则，flow-root或 Flex 就是更稳的默认方案
float 临时关掉后突然正常的瞬间——那说明问题根源就在浮动本身，而不是清除没写对。 
