float元素后出现多余空白，是因浮动脱离文档流致父容器高度塌陷，后续内联级元素受基线对齐和行高影响产生视觉间隙；应使用clearfix或display: flow-root解决，而非盲目调整margin。
float元素后面为什么总有多余空白
因为浮动元素脱离文档流，父容器高度塌陷，后续兄弟元素会“上浮”到浮动元素旁边，但文字行高、内联元素基线对齐等机制会让它看起来像多了间距。这不是margin或padding真被加了，而是视觉错觉+盒模型计算偏差。
- 常见错误现象：
div里几个float: left的子项，下面紧跟一个p，结果p顶部离父容器底边有莫名其妙的20px空隙 - 真正触发点通常是：父容器没清除浮动 + 后续元素是内联级（如
span、纯文本）或display: inline行为的块级元素 - 别急着调
margin-top或padding-bottom——这治标不治本，换字体、换行高又出问题
clear:both不是万能解，但clearfix最稳
clear: both只能解决紧挨着浮动元素之后那个元素的“上浮”，对整个父容器高度塌陷无效。要让父容器包裹住所有浮动子项，得用clearfix方案。
- 推荐在父容器上加类
clearfix，CSS写：.clearfix::after { content: ""; display: table; clear: both; } - 不要用
overflow: hidden强行撑高——它会裁剪position: absolute子项或阴影，兼容性也差（IE6/7不支持::after时可用zoom: 1触发hasLayout） - 现代项目可直接用
display: flow-root替代，它原生创建BFC且无副作用，但IE全系不支持
margin和padding调多少才不翻车
如果已经用了clearfix，还有微小错位，大概率是行内格式化上下文（IFC）里基线对齐惹的祸——特别是浮动元素后面跟着文字或inline-block时。
- 浮动元素默认按
baseline对齐，设vertical-align: top或vertical-align: bottom能立刻消除间隙 - 别碰
font-size: 0这种hack：它会让子元素里的文字全消失，除非你显式重设子元素font-size - 如果必须调间距，优先动
margin-bottom（浮动元素自身）而不是后续元素的margin-top，前者影响范围可控 - 注意
line-height继承：父容器设了line-height: 2，浮动元素虽脱离流，但其内部文本仍受此影响，可能撑高容器
Flex/Grid时代还要管float清除吗
新项目尽量别用float做布局，但老代码维护、邮件模板、CMS生成内容里还大量存在。这时候清除逻辑不能省，否则响应式断点一变，间隙位置就飘移。
- CSS-in-JS或组件库中，如果封装了浮动卡片组件，务必在组件根元素上内置
clearfix或display: flow-root - 用
display: inline-block模拟浮动时，同样会因空白符产生间隙，解决方案是父容器设font-size: 0再单独设子项字号——和float间隙成因不同，别混用修复方式 - 真正容易被忽略的是：某些UI框架（比如Bootstrap 3）的
.row自带clearfix，但如果你嵌套了自定义浮动结构，外层.row的清除可能失效，得额外加一层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
