浮动元素右侧空白实为父容器高度塌陷所致，因float脱离文档流；清除浮动需在父容器内末尾添加clear:both元素或伪元素，overflow:hidden仅通过触发bfc间接解决但有裁剪风险；现代布局应优先使用flex或grid。
浮动元素右侧出现空白的典型原因
这不是“右边有空白”，而是父容器高度塌陷后，后续兄弟元素从浮动元素底部开始排列，视觉上像右侧留空。本质是 float 脱离文档流，父容器无法包裹它，导致后续内容“上浮”到浮动元素旁——尤其当父容器没设高、没清除浮动时最明显。
用 clear 清除浮动的实操要点
clear 本身不解决父容器塌陷，它只是让某个元素避开前面的浮动，常用于在浮动下方强行换行。真正要撑开父容器，得在父容器内部末尾加一个“清浮动”的块级元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}
或者更直接地在 HTML 中插入：
<div class="parent"> <div class="float-left">左浮动</div> <div style="clear: both;"></div> </div>
-
clear: left/right/both只对块级元素生效，inline元素无效 - 单独给父容器加
clear没用——它没浮动，清什么？ - 如果父容器本身是浮动的，
clear会作用于它的上一个浮动兄弟，不是子元素
用 overflow: hidden 的副作用与边界
给父容器设 overflow: hidden（或 auto、scroll）能触发 BFC，强制包含浮动子元素，从而撑高自身。但它不是“清除浮动”，而是绕过问题：
立即学习“前端免费学习笔记（深入）”；
- 内容溢出会被裁剪，比如下拉菜单、tooltip、绝对定位超出父边界的元素会消失
- 在 Flex 或 Grid 容器中设
overflow: hidden不会创建新 BFC，该方法失效 -
overflow: hidden在 Safari 旧版本中可能引发滚动条闪烁或重绘异常
现代项目该选哪个
如果还在用 float 布局，优先用 ::after 伪元素 clearfix；若只是临时调试，overflow: hidden 快但危险。不过更关键的是：现在绝大多数场景不该用 float 做布局——display: flex 或 display: grid 天然不塌陷，没有“右侧空白”一说。坚持用浮动，等于主动给自己埋清除逻辑的坑。
