浮动导致父容器高度塌陷的解决方法有：在父容器末尾加、设overflow:hidden/auto触发BFC、或用display:flow-root；clear仅对块级元素生效，且必须置于浮动元素之后才起作用。
浮动元素导致父容器高度塌陷怎么办
这是浮动错位最典型的症状：父容器没内容、没边框，却看不见子元素，实际是父容器高度变成 0 了。根本原因是浮动元素脱离文档流，父容器无法感知其高度。
用 clear 清除浮动本身并不能解决塌陷——它只是让后续元素避开浮动区域，对父容器“重新包裹”无直接作用。真正起效的是在父容器内部插入一个能触发 BFC 或强制撑高的清除节点。
- 推荐在父容器末尾加一个空
<div style="clear: both"></div>（兼容性最好，IE6+ 都支持） - 更现代的做法是给父容器设置
overflow: hidden或overflow: auto（触发 BFC，但注意会隐藏溢出内容） -
display: flow-root是目前最干净的方案（Chrome 64+/Firefox 58+ 支持），不干扰布局也不隐藏溢出
clear 属性只能作用于块级元素吗
是的。clear 对 inline、inline-block 元素无效，只对处于正常文档流中的块级元素（或表格、列表项等可参与块格式化上下文的元素）生效。
常见误用：span 或 a 标签加 clear: both 完全没反应；浮动的 button 后面跟一个 clear: left 的 div 才会下移避开左侧浮动。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是块级（默认或显式设
display: block） -
clear: left只避开左边浮动，clear: right只避开右边，clear: both才避开所有方向 - 如果元素本身也浮动了，
clear仍有效，但它会先完成浮动定位，再根据clear偏移
为什么 clear:both 的 div 放在浮动元素后面才有效
因为 clear 的作用机制是「计算当前元素的上边界，使其不低于前面所有指定方向浮动元素的下边界」。它不改变前面的浮动元素，只调整自己的位置。
如果把 <div style="clear: both"></div> 放在浮动元素前面，它没东西可“避开”，就按正常流渲染；只有放在浮动元素之后，浏览器才会检查前面有没有浮动，并据此下推它。
- 错误写法：
<div style="clear:both"></div> <div class="float-left">内容</div> - 正确写法：
<div class="float-left">内容</div> <div class="float-right">内容</div> <div style="clear:both"></div> - Flex/Grid 布局中不需要
clear，因为它们天然不依赖浮动
清除浮动后出现额外空白间距怎么调
这个空白通常来自清除元素自身的 margin 或父容器的 line-height。尤其当清除元素是空 div 且未重置样式时，浏览器可能继承默认 margin 或 font-size 导致高度异常。
- 给清除元素加
margin: 0; height: 0; font-size: 0; line-height: 0; - 用伪元素替代空标签：
.clearfix::after { content: ""; display: block; clear: both; }，再给父容器加clearfix类 - 避免在清除元素上设置 padding 或 border，它们会真实增加高度
浮动不是过时技术，但在响应式布局中容易失控。真正要警惕的不是“怎么清”，而是“为什么非得用 float”。很多所谓错位，其实换用 display: flex 或 grid 一行代码就解了。
