Float使子元素脱离文档流致父容器高度塌陷；解决需触发BFC、clear清除或伪元素clearfix；clear仅避让不归位；float与inline-block混用产生空白间隙；IE6存在float双倍边距bug。
float 会让元素脱离文档流，导致父容器高度塌陷
这是最常被忽略的副作用：一旦子元素设置了 float: left 或 float: right，它就不再参与父容器的高度计算。结果就是父容器“看不见”浮动子元素，高度变成 0，后续内容直接往上叠。
常见现象：div 包着几个 float: left 的卡片，但背景色没显示、边框不包裹内容、下面的段落紧贴在浮动块顶部。
解决思路不是硬加高度，而是让父容器“感知”到浮动子元素的存在：
- 给父容器加
overflow: hidden（或auto），触发 BFC，强制包含浮动子元素 - 在最后一个浮动子元素后插入一个清除元素：
- 用伪元素清除（推荐）：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器添加
class="clearfix"
clear 只对自身生效，不能“清除前面所有浮动”
clear: left 的意思是“本元素的上边界不能和前面任何 float: left 的元素下边界重叠”，但它不会把前面的浮动元素拉下来，也不会影响其他未设置 clear 的兄弟元素。
立即学习“前端免费学习笔记（深入）”；
典型误用场景：三个并排的 float: left 块，想让第三个换行，就只给第三个加 clear: left——这其实没用，因为前两个已经占了同一行的左空间，第三个本来就会被挤到下一行；但如果中间某个块高度不一致，第三个可能卡在第二块右侧空隙里，这时才需要 clear: left 强制换行。
关键判断点：
-
clear是“避让”，不是“归位” - 如果想让某元素严格独占一行，更稳妥的是同时设
clear: both和width: 100% - 多个
float元素之间高度差异大时，clear往往要加在“需要断行”的那个元素本身，而不是它的父容器
float + inline-block 混用会因空白符产生意外间隙
当 float 元素和 display: inline-block 元素混排（比如导航栏中部分用 float，部分用 inline-block），html 中的换行和空格会被渲染为 4px 左右的空白间隙，破坏等宽布局。
这不是 float 的 bug，而是 inline formatting context 的默认行为。解决方案取决于你控制 HTML 的自由度：
- 删掉 HTML 源码中元素间的换行和空格（不推荐，可维护性差）
- 给父容器设
font-size: 0，子元素再单独设font-size（注意继承问题） - 统一用
float，避免混用——这是最可控的做法
现代项目中，更建议直接用 display: flex 替代，float 仅用于兼容老浏览器或特定文字环绕场景。
IE6/7 下 float 元素的 double-margin bug 必须 hack
在 IE6 及部分 IE7 中，对已设置 float 的块级元素再加 margin-left 或 margin-right，实际外边距会翻倍（比如设 margin-left: 10px，渲染成 20px）。
根本原因是 IE6 的盒模型解析缺陷，且只发生在 float 方向与 margin 同向时（如 float: left + margin-left）。
修复方式简单但必须写：
- 给该元素加
display: inline（注意：仅 IE6 识别，其他浏览器忽略） - 或者用条件注释加载 IE6 专用样式：
* html .my-floated-item { margin-left: 5px; }
这个 bug 看似小，但在像素级对齐的布局中会导致整行错位，上线前务必在真实 IE6 环境下验证。