布局高度塌陷是父容器无法感知浮动子元素高度而收缩，解决关键是让父容器正确包含浮动子项；推荐用伪元素.clearfix::after清除浮动，兼容性好且无副作用。

布局高度塌陷本质是父容器无法感知浮动子元素的高度，从而“收缩”到零或最小高度，造成后续元素上移、背景消失、边框不包裹内容等问题。解决核心是让父容器重新包含浮动子项——不是强行加高，而是让浏览器正确计算高度。

用伪元素 ::after 清除浮动（推荐）

这是当前最通用、无副作用的方案，兼容现代浏览器及 IE8+（配合 zoom 可支持 IE6/7）：

• 给父容器添加一个类名，比如 clearfix
• 在 CSS 中写：
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
• IE6/7 需额外加 .clearfix { zoom: 1; } 触发 hasLayout

触发 BFC 让父容器自包裹浮动

BFC（块级格式化上下文）能让容器独立计算内部布局，天然包含浮动子元素。只需满足任一条件即可：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• overflow: hidden | auto | scroll（最常用，注意慎用 hidden 可能裁剪溢出内容）
• display: flex | grid | inline-block | table-cell
• float: left | right（父元素自己浮动，但会脱离文档流，慎用）
• position: absolute | fixed（同样脱离文档流，一般不用于此目的）

临时补救：加空标签清除浮动

适合快速验证或老旧项目，但污染 HTML 结构：

• 在父容器末尾插入：<div style="clear: both"></div>
• 或使用语义更轻的 <br clear="both">
• 注意：该元素必须是块级且未浮动，才能强制下推并撑开父高

避免踩坑的细节提醒

清除浮动不只是加样式，还要注意这些实际影响：

• 浮动元素不再响应 margin: auto，居中需改用 flex 或 text-align
• clear 是作用在“自身”上的属性，意思是“我不要被前面的浮动顶开”，所以要加在需要下推的元素上
• 如果父容器已有 overflow: visible（默认值），直接设 hidden 最简；若需保留滚动或溢出效果，优先选伪元素法
• 多个浮动子项混排时，clear: both 比 left/right 更稳妥，避免遗漏方向