父容器高度塌陷是“大空白”的真正原因，浮动元素脱离文档流致computed height为0，后续元素从零高度底部渲染；html换行符作为空格撑开约4px间隙；图文环绕空白多因img默认inline及基线对齐所致。
不是浮动本身变大了，是父容器高度塌陷 + HTML 空白字符共同作用的结果。先看 computed height 是否为 0，再检查浮动元素间的换行符。
父容器高度塌陷才是“大空白”的真正原因
浮动元素脱离文档流，父容器无法感知其高度，computed height 变成 0 或远小于预期。后续元素从这个“零高度底部”开始渲染，视觉上就顶出一大块空白——这不是 margin，是布局断裂。
- 用开发者工具选中父容器，在
Computed面板确认height值；如果接近 0，说明塌陷已发生 -
clear: both加在父容器上完全无效，它不参与浮动流，语法合法但无任何排版效果 - 加在浮动元素自身（如
.float-box { clear: both; }）也无效，clear 不改变已浮动元素的位置 - 真正该做的是让父容器创建 BFC：
display: flow-root是首选，语义清晰、无裁剪副作用；overflow: hidden虽常用，但可能意外截断position: absolute子项或阴影
HTML 换行符被解析为空格，撑开 4px 左右间隙
多个 <div class="item"></div> 写成多行时，换行符会被浏览器当作一个空白字符（U+0020）处理。只要父容器有 font-size: 16px 和默认 line-height，这个空格就会参与行框计算，视觉上撑出约 4px 宽度或高度。
- 把 HTML 压成一行：
<div class="item"></div> <div class="item"></div>，间隙立刻消失 - 若 HTML 由 Vue/React/SSR 动态生成，无法手动压缩，可用
font-size: 0切断空白渲染，但必须给每个浮动子元素显式重置font-size（如.item { font-size: 14px; }），漏掉就会文字消失 -
vertical-align对float: left的块级元素完全无效，写了等于没写 - 负
margin-left: -4px是典型掩耳盗铃：响应式下失效，不同字号下偏移不准，仅适合固定尺寸且无缩放需求的场景
图文环绕时图片下方突然多出空白
这通常不是浮动问题，而是 <img> 默认为 inline 元素，受父容器 line-height 和基线对齐影响。文字环绕区域的边界由图片自身的 margin 控制，不是靠外层 p 或容器加间距。
-
<img>必须显式设display: block，否则部分浏览器会忽略margin - 只写需要的方向：
float: left; margin-right: 16px;，避免用margin: 12px这类简写——margin-bottom会干扰段落行高，造成错位 - 响应式断点里务必同步重置：
@media (max-width: 768px) { img { float: none; margin-left: 0; margin-right: 0; } } - 别给图片父容器设
font-size: 0，富文本编辑器插入的<p></p>可能继承该值而失真
最常被忽略的一点：你看到的“空白”，可能根本不是同一个东西——有的是塌陷导致的垂直断裂，有的是空白字符撑开的水平缝隙，还有的是 inline 图片基线对齐引发的底部余量。不先用开发者工具定位节点和 computed 值，所有调整都是盲调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
