浮动导致父容器高度塌陷时，应触发bfc（如overflow:hidden）或伪元素清除；标签间空白引发间隙需删空格或设font-size:0；清除后空白多因清除元素自带margin；现代布局优先用flex或grid替代float。
浮动元素导致父容器高度塌陷怎么办
父容器没设置高度时，内部只有 float 元素，它会“看不见”子元素，表现为高度为 0 —— 这不是 bug，是浮动的原始设计行为。常见现象是背景色消失、边框不包裹内容、后续元素上移。
- 别指望
height: auto自动撑开，浮动元素已脱离文档流 - 避免给父容器硬写
height，响应式下会失效 - 优先用
overflow: hidden或overflow: auto触发 BFC，简单有效且兼容性好（IE8+） - 若需支持 IE6/7，可用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }并给父容器加class="clearfix"
多个浮动元素之间出现意外空白间隙
这通常不是 margin 或 padding 导致，而是 HTML 源码中换行符和空格被渲染为文本节点，再与 inline 行为的浮动元素发生基线对齐，产生视觉缝隙。
- 检查是否在浮动元素标签间写了换行或缩进，比如：
<div class="item">A</div> <div class="item">B</div>
这种写法在某些浏览器下会留空隙 -
解决方法：删掉标签间的空白字符，写成连写：
<div class="item">A</div><div class="item">B</div>
- 或统一设
font-size: 0在父容器，再在子元素里重置字体大小（注意内联元素如span也会受影响） - 更稳妥的做法是改用
display: flex替代 float 布局，现代项目中几乎无需纠结此问题
清除浮动后仍残留空白占位
用了 clear: both 或 BFC 清除，但布局下方还有多余空白，大概率是清除元素自身带来了 margin/padding，或其默认 display 类型（如 block 元素的上下 margin 合并）引发的。
- 确认清除用的元素是否设置了
margin或padding，特别是::after伪元素默认没有，但手写的清除<div style="clear:both"></div>容易带样式 - 检查清除元素的
display值，table和block表现不同；伪元素清除推荐用display: table，避免 margin 合并 - 如果清除元素后面紧跟着新内容，注意
clear只影响自身位置，不压缩前面浮动元素留下的“空间感”，视觉空白可能来自浮动元素的 margin
移除冗余浮动元素的最佳实践
很多项目还在保留历史遗留的 float: left 写法，但实际已无必要 —— 现代布局中，90% 的浮动场景可用更可控的方式替代。
立即学习“前端免费学习笔记（深入）”；
- 单行多列布局：用
display: flex+flex-wrap: wrap，无需清除，无塌陷，响应式友好 - 文字环绕图片：仍可保留
float，但注意限制图片宽度、设置max-width: 100%防溢出，并用margin控制间距 - 导航栏或卡片网格：直接上
display: grid，列数、间距、对齐一目了然，不用算浮动宽度和 margin - 真要保留 float，请确保每个浮动元素都有明确的
width，否则在不同字号或缩放下容易错行
