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 左右的空白间隙，破坏等宽布局。
