浮动导致父容器高度塌陷时，首选 overflow: hidden 或 auto 触发 bfc 解决；避免空标签清除法，现代项目应优先使用 flex/grid 布局。
浮动元素父容器高度塌陷怎么办
用 float 布局时，父容器不包住子元素，是初学者最常遇到的“消失”问题。本质不是 bug，而是浮动元素脱离文档流后，父容器无法感知其高度。
- 别用
height硬撑，会破坏响应性 - 优先用
overflow: hidden或overflow: auto触发 BFC —— 简单、兼容性好（IE6+）、无副作用 - 避免用
clear: both的空标签（如<div style="clear:both"></div>），语义差且冗余 - Flex/Grid 时代不推荐新建浮动布局，但维护老项目时，
overflow是最稳解法
多个浮动元素换行错位的常见原因
比如两列 float: left，在窄屏下本该堆叠，却出现右侧元素掉到左列下方、留白异常——这往往不是浮动本身的问题，而是盒模型或空格干扰。
- 检查是否意外设置了
margin-right或width总和超过 100%，尤其注意box-sizing默认是content-box - HTML 中浮动元素间的换行符/空格会被渲染为一个空格，可能让第二项“挤不下”，建议写成
<div>...</div> <div>...</div>连写，或用font-size: 0抑制父容器内联空白 - IE6–7 下
display: inline元素浮动后可能双倍 margin，加display: inline-block或用*zoom: 1触发 hasLayout
清除浮动的现代替代方案对比
当必须清除浮动影响（比如后面跟一个非浮动标题），::after 伪元素仍是首选，但要注意细节差异。
-
.clearfix::after { content: ""; display: table; clear: both; }—— 兼容 IE8+，安全可靠 - 不用
display: block+clear，它不清除 BFC 边界外的浮动影响 - 不要省略
content，否则伪元素不生成；也不要写content: ""却漏掉引号（部分旧浏览器报错） - 如果父容器已设
overflow，就不需要额外 clearfix —— 重复清除没坏处但多余
浮动与定位、Flex 混用时的层级陷阱
浮动元素的层叠顺序（stacking context）容易被忽略，尤其和 position: relative/absolute 同时存在时。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素默认创建新 stacking context（IE6–7 下仅当有
z-index时才创建），可能让z-index表现异常 - 绝对定位元素若父容器是浮动的，它的
top/left是相对于该浮动父容器计算的，但该父容器自身位置又受浮动影响 —— 容易误判偏移基准 - 混用浮动和 Flex 时，浮动元素会脱离 flex 容器的布局控制，变成“游离态”，视觉上还在里面，逻辑上已被忽略
