浮动导致父容器高度塌陷，文字上移本质是父容器缩为0高；应通过触发BFC（如伪元素clear:both）或改用flex/grid布局来根本解决。

浮动元素导致父容器高度塌陷，文字上移

这是浮动最典型的副作用：float 元素脱离文档流，父容器无法感知其高度，导致后续内容（比如段落文字）直接“顶上来”，看起来像上移了。本质不是文字动了，而是父容器缩成 0 高，文字自然落到它上面。

• 检查父容器是否没设 height，也没触发 BFC（块级格式化上下文）
• 用浏览器开发者工具选中父容器，看它的实际高度是不是 0px
• 确认子元素是否用了 float: left 或 float: right，且未被清除

用 clear 清除浮动的几种方式

clear 本身不解决父容器塌陷，它只是让某个元素“避开”浮动区域。真正起作用的是在父容器内部加一个清除元素（或伪元素），从而撑开高度。

• 在父容器末尾加空标签：

  <div class="wrapper">
    <div class="float-box"></div>
    <div style="clear: both;"></div>
  </div>

• 更推荐用伪元素（避免冗余 HTML）：

  .wrapper::after {
    content: "";
    display: table;
    clear: both;
  }

  注意：display: table 比 block 更稳妥，能兼容老版 IE
• clear: left/right 只清除对应方向的浮动，除非明确需要，否则统一用 both

为什么有时加 margin-top 看似“修好”了，但不推荐

给下方文字加 margin-top，只是把文字强行往下推，父容器依然塌陷。这属于视觉欺骗，会带来连锁问题：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 如果后续新增内容或改样式，这个 magic number（比如 margin-top: 20px）很快失效
• 响应式断点下，浮动高度变化，固定 margin 就错位
• 父容器如果有背景色、边框或阴影，会完全不可见——这才是真正的 bug
• 移动端 touch 区域、无障碍阅读器都可能因结构错乱出问题

现代替代方案：优先用 display: flex 或 display: grid

浮动本就不是为布局设计的，CSS3 布局方案更可靠。只要父容器支持 Flex 或 Grid，就别用 float 做布局。

立即学习“前端免费学习笔记（深入）”；

• Flex 替代左右浮动：

  .wrapper {
    display: flex;
  }
  .float-box {
    /* 不需要 float */
    flex: 0 0 200px; /* 类似 float:left 的宽度控制 */
  }

• Grid 更适合复杂排列：

  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

• 如果必须兼容 IE9 及以下，才考虑 float + clearfix；其他情况，清除浮动只是过渡手段

浮动塌陷的问题看似简单，但很多人只盯着“文字位置”，忽略了父容器结构已损坏。真正要 fix 的从来不是那行文字，而是整个容器的高度感知能力。