Knowledge_Base

主题

Teeker2026-07-24
5063
20.1m

margin重叠高度塌陷BFC ​

margin重叠，高度塌陷，BFC ​

第一层：基础认知（它们到底是什么关系？） ​

  • 高度塌陷（现象）：父盒子没设高度，子元素浮动（float） 或绝对定位脱离了文档流，父盒子“撑不起来”，高度变成 0。
  • Margin 重叠（现象）：两个相邻的块级盒子（兄弟或父子），上下外边距（margin-top/bottom）会取两者中的较大值，而不是相加（比如上 margin-bottom:30px，下 margin-top:20px，中间间距只有 30px）。
  • BFC（解决方案）：BFC 是页面上一块独立的渲染区域。它有一套自己的“铁律”：内部的元素无论怎么翻江倒海（浮动/重叠），都不会影响到外部；外部的元素也挤不进来。
  • 三者逻辑链（背出来）：“高度塌陷”和“Margin重叠”是CSS布局中的两大“顽疾”，而“BFC（块级格式化上下文）”就是医治这两个顽疾的“特效药”。

第二层：进阶原理（BFC 的 6 大铁律与触发机制） ​

面试官会追问：“BFC 到底是什么？它为什么能解决这两个问题？”

回答（展现源码级理解）：

“BFC 触发的条件有很多（如 overflow: hidden、display: flex、position: absolute）。一旦触发，它内部遵循 6 条布局规则，其中最关键的两条正好对应这两个问题：

  1. 计算 BFC 的高度时，内部的浮动元素也参与计算（→ 解决高度塌陷）。
  2. 属于同一个 BFC 的两个相邻块级盒子的 margin 会发生重叠；但不同 BFC 的盒子，margin 不会重叠（→ 解决 Margin 重叠）。”

触发 BFC 的常见方式（你至少记住前 3 个）：

/* 1. 最推荐的“万能清除法”（副作用最小） */
.parent { overflow: hidden; } 

/* 2. 现代布局首选（自带 BFC 特性，无副作用） */
.parent { display: flex; }  /* 或 grid */

/* 3. 浮动或绝对定位（不推荐，会引起其他布局问题） */
.parent { float: left; }
.parent { position: absolute; }

/* 4. 表格布局（极少用） */
.parent { display: table-cell; }

第三层：源码/实战代码（结合你的项目，手把手讲清楚） ​

场景一：解决“高度塌陷”（结合你的 IRMP 报告布局） ​

面试官问：“你平时写 Vue 组件，如果父容器高度撑不开怎么办？”

你的回答（带代码）：

“在 IRMP 报告详情页，左侧是目录树（浮动），右侧是内容区。如果不触发 BFC，父容器高度会变成 0，背景色会丢失。

❌ 错误写法（面试时指出错在哪）：

<div class="parent"> <!-- 背景色是蓝色，但高度为 0，看不见 -->
  <div style="float:left; width:30%;">目录</div>
  <div style="float:right; width:70%;">内容</div>
</div>

✅ 我的修复方案（在 Vue 组件中加一个 class）：

.parent {
  overflow: hidden; /* 触发 BFC，此时计算高度会把浮动的儿子算进去 */
  background: #f0f2f5;
}
// 或者在现代项目中，我直接用 flex 替代 float，根本不会出现塌陷：
.parent {
  display: flex; /* 自带 BFC，且不需要清除浮动 */
}

场景二：解决“Margin 重叠”（结合你的 MMMP 大屏仪表板） ​

面试官追问：“如果两个兄弟组件之间上下间距比预期小，你怎么排查？”

你的回答（带代码）：

“在 MMMP 监控大屏，顶部是‘告警统计卡片’，下面是‘实时视频流’。我设置卡片 margin-bottom: 30px，视频流 margin-top: 20px，结果发现间距只有 30px（取了最大值），而不是 50px。这就是典型的 Margin 重叠。

✅ 解决方案（给其中一个盒子套上 BFC 外壳）：

<!-- 方案：将下面这个盒子用 overflow:hidden 包裹，让它成为一个新的 BFC -->
<div class="card-container" style="margin-bottom:30px;">告警卡片</div>
<!-- 触发 BFC 的包裹层，与外部的 margin 隔开 -->
<div style="overflow: hidden;"> 
  <div style="margin-top:20px;">视频流</div>
</div>
<!-- 此时 30px 和 20px 互不干扰，实际间距变为 50px -->

第四层：面试官的“变态连珠炮”与你的应对（必看！） ​

面试官不会让你轻松过关，他会踩着你前面的回答继续深挖：

追问 1：“BFC 既然这么好，为什么不把所有的父容器都加上 overflow: hidden？”

你的回答：“绝对不行！overflow: hidden 的本意是裁剪溢出内容。如果父容器内有绝对定位的下拉菜单（dropdown）或弹窗，加了这个属性，下拉菜单超出父容器的部分会被直接裁剪掉，显示不全。这是前端非常经典的线上BUG。我会分情况选择：

  • 内部没有弹窗/下拉菜单的普通容器：用 overflow: hidden。
  • 有下拉菜单或复杂交互：用 display: flow-root（专门为触发 BFC 设计的 CSS 属性，无任何副作用）或 display: flex。”

追问 2：“display: flex 触发的 BFC 和 overflow: hidden 触发的 BFC 规则一样吗？”

你的回答：“底层 BFC 规则一样（都是独立渲染区域，包含浮动）。但 Flex 容器有自己的主轴/交叉轴布局算法，它的子元素不再遵循‘块级盒子垂直排列’的常规流。所以如果仅仅为了解决塌陷，overflow:hidden 更轻量；如果需要做复杂排列，选 flex。”

追问 3：“position: absolute 也能触发 BFC，用它解决塌陷行不行？”

你的回答：“这是典型的错误用法！absolute 会让父容器彻底脱离文档流，父容器虽然有了 BFC，但父容器本身都浮起来了，会影响兄弟元素的布局。解决塌陷永远不能用 absolute，只能用 overflow 或 flex。

面试现场组合技（把这三点连起来回答） ​

如果面试官直接问：“说说你对 CSS 中 BFC 的理解。” 你就这样一气呵成地回答，把三个点全部串起来：

（面试官您好），BFC 是我在解决 CSS 布局问题中使用频率最高的核心概念。

首先，它是页面上一块独立的渲染区域。它最核心的价值体现在解决了两个经典的布局痛点：

  1. 高度塌陷：当子元素浮动时，父容器高度变为 0。我通过给父容器触发 BFC（比如 overflow: hidden），BFC 在计算高度时会强制把浮动的子元素算进去，从而完美撑开。
  2. Margin 重叠：当兄弟元素或父子元素上下边距重叠时，我只需要给其中一个元素套上一层触发 BFC 的外壳（如 display: flow-root），让它们不属于同一个 BFC，边距就不会重叠了。

我在实际的 IRMP 报告平台维护中，为了兼顾布局和下拉菜单显示，我没有用 overflow: hidden，而是统一采用了 display: flex 布局，它天然具备 BFC 特性，既解决了塌陷，又不会裁剪掉浮层弹窗，代码更干净、可维护性更强。

============================================================

一、Margin合并（外边距折叠 / Margin Collapse） ​

============================================================

1. 什么是Margin合并？ ​

定义：当两个或多个垂直方向的块级元素的外边距相遇时，它们不会相加，而是取最大值作为最终间距。

正常预期: margin-top: 20px + margin-bottom: 30px = 50px
实际结果: max(20px, 30px) = 30px  ← 这就是margin合并

2. 三种触发场景（面试必答） ​

场景1：相邻兄弟元素之间的合并 ​

html
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
css
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距 = 30px（取最大值），不是50px */

图解：

┌─────────────┐
│   Box 1     │  ← margin-bottom: 20px
└─────────────┘
              ← 合并后间距 = 30px（不是50px！）
┌─────────────┐
│   Box 2     │  ← margin-top: 30px
└─────────────┘

场景2：父元素与第一个/最后一个子元素的合并 ​

html
<div class="parent">
  <div class="child">Child</div>
</div>
css
.parent {
  /* 没有border、padding、overflow等触发BFC的属性 */
  background: lightblue;
}
.child {
  margin-top: 50px;  /* 子元素的margin-top会"穿透"到父元素外部 */
}

效果：子元素的margin-top: 50px不会把子元素往下推，而是让父元素整体下移50px！

预期效果:                    实际效果:
┌─────────────┐             
│  (空白50px) │             ┌─────────────┐
├─────────────┤             │  Parent     │
│  Parent     │             │  ┌───────┐  │
│  ┌───────┐  │             │  │ Child │  │
│  │ Child │  │             │  └───────┘  │
│  └───────┘  │             └─────────────┘
└─────────────┘

同样适用于最后一个子元素的margin-bottom。

场景3：空元素的上下margin合并 ​

html
<div class="empty"></div>
css
.empty {
  margin-top: 20px;
  margin-bottom: 30px;
  /* 没有height、border、padding、content */
}
/* 这个空元素占据的总高度 = 30px（取最大值），不是50px */

3. 什么情况下不会发生Margin合并？ ​

条件说明
水平方向margin-left和margin-right永远不会合并
浮动元素float: left/right
绝对定位position: absolute/fixed
行内块display: inline-block
BFC容器overflow: hidden/auto等触发BFC
Flex/Grid容器display: flex/grid
有borderborder-top/bottom不为0
有paddingpadding-top/bottom不为0
有高度空元素有height/min-height

4. 代码示例：解决Margin合并的N种方法 ​

html
<!-- 场景：父元素包裹子元素，子元素margin-top"穿透" -->
<div class="parent">
  <div class="child">内容</div>
</div>
css
/* ========== 方法1：给父元素加border（最常用） ========== */
.parent {
  border-top: 1px solid transparent;  /* 透明边框，视觉上不影响 */
}

/* ========== 方法2：给父元素加padding ========== */
.parent {
  padding-top: 1px;  /* 哪怕1px也能阻止合并 */
}

/* ========== 方法3：触发BFC（推荐） ========== */
.parent {
  overflow: hidden;  /* 最常用 */
  /* 或 */
  display: flow-root;  /* 现代浏览器，无副作用 */
}

/* ========== 方法4：使用Flex/Grid布局 ========== */
.parent {
  display: flex;
  flex-direction: column;
}

/* ========== 方法5：给子元素用padding代替margin ========== */
.child {
  margin-top: 0;
  padding-top: 50px;  /* 用padding实现同样的视觉效果 */
}

5. 结合项目实战 ​

css
/* ========== 智慧工地大屏仪表板 ========== */
.dashboard-container {
  /* 问题：每个卡片之间的间距用margin，但相邻卡片margin会合并 */
}

.dashboard-card {
  margin-bottom: 20px;
}

/* 解决方案1：父容器用Flex + gap（推荐） */
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* gap不会合并，且语义清晰 */
}
.dashboard-card {
  margin: 0;  /* 不需要margin了 */
}

/* 解决方案2：父容器触发BFC */
.dashboard-container {
  overflow: hidden;  /* 阻止子元素margin穿透 */
}

/* ========== IRMP报告平台：表单布局 ========== */
.form-group {
  /* 问题：label和input之间的间距 */
  margin-bottom: 24px;  /* 如果下一个form-group有margin-top，会合并 */
}

/* 解决方案：统一只设一个方向 */
.form-group {
  margin-bottom: 24px;  /* 只设bottom，不设top */
}
.form-group:last-child {
  margin-bottom: 0;  /* 最后一个去掉 */
}

/* 或用padding实现内部间距 */
.form-group {
  padding: 12px 0;  /* 用padding代替margin */
}

6. 面试话术 ​

"请讲一下margin合并"

"margin合并是指垂直方向上相邻块级元素的外边距不会相加，而是取最大值。有三种场景：

  1. 相邻兄弟元素之间
  2. 父元素和第一个/最后一个子元素之间（子元素的margin会'穿透'父元素）
  3. 空元素的上下margin合并

解决方法主要是触发BFC，比如给父元素加overflow: hidden，或者使用Flex/Grid布局的gap属性。 在我的项目中，大屏仪表板的卡片间距一开始用margin遇到了合并问题，后来改用Flex的gap属性，既避免了合并又更语义化。"

============================================================

二、BFC（Block Formatting Context，块级格式化上下文） ​

============================================================

1. 什么是BFC？ ​

定义：BFC是CSS中的一个独立的渲染区域，内部的元素布局不会影响到外部，外部的元素也不会影响到内部。

通俗理解：BFC就是一个"结界"，里外互不影响。

┌─────────────────────────────┐
│         外部元素               │
│   ┌─────────────────────┐   │
│   │      BFC区域         │   │
│   │   ┌─────────────┐   │   │
│   │   │  内部元素    │   │   │
│   │   │  自由布局    │   │   │
│   │   └─────────────┘   │   │
│   └─────────────────────┘   │
│         外部元素               │
└─────────────────────────────┘

特点：
- BFC内部元素的布局不影响外部
- 外部元素的布局不影响BFC内部
- BFC区域不会与浮动元素重叠

2. BFC的触发条件（如何创建BFC） ​

css
/* ========== 常用触发方式 ========== */

/* 1. overflow不为visible（最常用） */
.bfc-container {
  overflow: hidden;    /* 最常用，无副作用 */
  overflow: auto;      /* 可能有滚动条 */
  overflow: scroll;    /* 一定有滚动条 */
}

/* 2. display: flow-root（现代浏览器推荐，无副作用） */
.bfc-container {
  display: flow-root;  /* 专门用于创建BFC，不会改变布局 */
}

/* 3. 浮动元素 */
.bfc-container {
  float: left;         /* 元素会脱离文档流 */
  float: right;
}

/* 4. 绝对/固定定位 */
.bfc-container {
  position: absolute;
  position: fixed;
}

/* 5. 行内块 */
.bfc-container {
  display: inline-block;
}

/* 6. Flex/Grid子项 */
.flex-item, .grid-item {
  display: flex;       /* Flex容器本身创建BFC */
  display: grid;       /* Grid容器本身创建BFC */
}

/* 7. 表格相关 */
.bfc-container {
  display: table;
  display: table-cell;
  display: table-caption;
}

/* 8. contain: layout/paint/content */
.bfc-container {
  contain: layout;
}

3. BFC的四大特性（面试核心） ​

特性1：内部元素垂直排列，margin会合并 ​

css
.bfc-box {
  overflow: hidden;  /* 创建BFC */
}
html
<div class="bfc-box">
  <p style="margin-bottom: 20px">段落1</p>
  <p style="margin-top: 30px">段落2</p>
  <!-- 内部margin仍然会合并：间距 = 30px -->
</div>

BFC内部的margin合并仍然会发生！BFC阻止的是内外之间的影响。

特性2：BFC区域不会与浮动元素重叠 ​

css
.float-left {
  float: left;
  width: 200px;
  height: 150px;
  background: lightcoral;
}

.bfc-right {
  overflow: hidden;  /* 创建BFC */
  /* 不需要设width，自动填满剩余空间 */
  background: lightblue;
}
html
<div class="float-left">浮动元素</div>
<div class="bfc-right">
  这是BFC区域，会自动避开浮动元素，
  形成经典的"两栏布局"
</div>

效果图解：

┌─────────────────────────────┐
│ ┌────────┐ ┌──────────────┐ │
│ │ 浮动   │ │   BFC区域     │ │
│ │ 200px  │ │  自动填满剩余  │ │
│ │        │ │   不会重叠    │ │
│ │        │ │              │ │
│ └────────┘ └──────────────┘ │
└─────────────────────────────┘

特性3：BFC可以包含浮动元素（清除浮动） ​

css
.parent {
  overflow: hidden;  /* 创建BFC，包裹住浮动的子元素 */
}

.child {
  float: left;
  width: 100px;
  height: 100px;
}
html
<div class="parent">
  <div class="child">浮动子元素</div>
  <!-- 父元素不会塌陷，高度会包含浮动子元素 -->
</div>

对比：

没有BFC（父元素塌陷）:       有BFC（父元素包裹浮动）:
┌─────────────────┐         ┌─────────────────┐
│ ┌─────┐         │         │ ┌─────┐         │
│ │float│         │         │ │float│         │
│ └─────┘         │         │ └─────┘         │
└─────────────────┘         │                 │
                            └─────────────────┘
父元素高度 = 0              父元素高度 = 子元素高度

特性4：计算BFC高度时，浮动元素也参与计算 ​

css
.bfc-container {
  overflow: hidden;
}
.float-item {
  float: left;
  height: 100px;
}
html
<div class="bfc-container">
  <div class="float-item">浮动</div>
  <!-- BFC容器的高度会包含浮动元素的高度 -->
</div>

4. BFC的实际应用场景（结合项目） ​

场景1：清除浮动（最经典） ​

css
/* ========== 智慧工地卡片列表 ========== */
.card-list::after {  /* 传统clearfix */
  content: '';
  display: table;
  clear: both;
}

/* 现代方案：直接用BFC */
.card-list {
  overflow: hidden;  /* 创建BFC，自动包裹浮动子元素 */
}

.card-item {
  float: left;
  width: 33.33%;
}

场景2：防止margin穿透（父元素包裹子元素） ​

css
/* ========== IRMP报告详情页 ========== */
.report-container {
  background: #fff;
  /* 问题：子元素h1的margin-top会穿透到容器外部 */
}

.report-container {
  overflow: hidden;  /* 创建BFC，阻止margin穿透 */
  /* 或 */
  padding-top: 1px;  /* 也能阻止，但有副作用 */
}

.report-container h1 {
  margin-top: 30px;  /* 现在不会穿透了 */
}

场景3：自适应两栏/三栏布局 ​

css
/* ========== 华为WeLink聊天界面 ========== */
.chat-layout {
  /* 左侧固定宽度联系人列表，右侧自适应聊天区域 */
}

.sidebar {
  float: left;
  width: 260px;
  height: 100vh;
  background: #f5f5f5;
}

.chat-area {
  overflow: hidden;  /* 创建BFC，自动填满剩余空间 */
  height: 100vh;
  background: #fff;
}
html
<div class="chat-layout">
  <div class="sidebar">联系人列表</div>
  <div class="chat-area">聊天区域（自适应宽度）</div>
</div>

场景4：防止文字环绕浮动元素 ​

css
/* ========== 隧道检测报告展示 ========== */
.report-image {
  float: left;
  width: 300px;
  margin-right: 20px;
}

.report-content {
  overflow: hidden;  /* 创建BFC，文字不会环绕图片 */
}
html
<div class="report">
  <img class="report-image" src="tunnel.jpg" />
  <div class="report-content">
    <!-- 这段文字不会环绕图片，而是形成独立的列 -->
    隧道检测报告详细内容...
  </div>
</div>

场景5：解决margin合并问题 ​

css
/* ========== 大屏仪表板卡片间距 ========== */
.dashboard-section {
  overflow: hidden;  /* 每个section都是独立的BFC */
  margin-bottom: 20px;
}

/* section内部的margin不会和外部合并 */

5. BFC vs 其他清除浮动方案对比 ​

css
/* ========== 方案对比 ========== */

/* 方案1：额外空元素 + clear:both（不推荐，污染HTML） */
<div class="clear"></div>
.clear { clear: both; }

/* 方案2：伪元素clearfix（常用，但代码多） */
.clearfix::after {
  content: '';
  display: table;  /* 或block */
  clear: both;
}

/* 方案3：overflow:hidden（最简单，但可能裁剪内容） */
.container { overflow: hidden; }

/* 方案4：display:flow-root（最佳，无副作用，现代浏览器） */
.container { display: flow-root; }

/* 方案5：Flex/Grid（现代布局首选） */
.container {
  display: flex;
  flex-wrap: wrap;
}
方案优点缺点
空元素clear兼容性好污染HTML结构
伪元素clearfix不污染HTML代码稍多
overflow:hidden简单可能裁剪溢出内容
display:flow-root无副作用，语义清晰IE不支持
Flex/Grid现代最佳实践改变布局方式

6. 面试话术 ​

"请讲一下BFC"

"BFC是块级格式化上下文，是CSS中的一个独立渲染区域，内外元素互不影响。

触发BFC的常见方式有：overflow: hidden、display: flow-root、浮动、绝对定位等。

BFC主要有四个特性：

  1. 内部元素垂直排列
  2. 不会与浮动元素重叠
  3. 可以包含浮动元素（清除浮动）
  4. 计算高度时包含浮动元素

在我的项目中，BFC主要用在三个场景：

  • 清除浮动：卡片列表中浮动子元素导致父元素塌陷，用overflow: hidden创建BFC解决
  • 防止margin穿透：报告详情页中子标题的margin-top穿透到容器外部，用BFC包裹
  • 自适应布局：WeLink聊天界面左侧固定联系人列表，右侧聊天区域用BFC自适应填满剩余空间

现代浏览器我更推荐用display: flow-root，它是专门用于创建BFC的属性，没有副作用，不会像overflow: hidden那样可能裁剪内容。"

============================================================

三、Margin合并 + BFC 综合面试题 ​

============================================================

题目1：以下代码的最终间距是多少？ ​

html
<style>
  .a { margin-bottom: 20px; }
  .b { margin-top: 30px; }
  .wrapper { overflow: hidden; }
</style>

<div class="a">A</div>
<div class="wrapper">
  <div class="b">B</div>
</div>

答案：间距 = 50px（20px + 30px）

解析：

  • .a和.b不是相邻兄弟（中间隔了.wrapper）
  • .wrapper创建了BFC，但.b的margin-top是在BFC内部
  • BFC阻止的是内外影响，不是内部的margin合并
  • 所以.a的margin-bottom和.wrapper的margin-top（这里没有）不会合并
  • .a和.wrapper之间的间距 = 20px
  • .wrapper内部.b的margin-top = 30px
  • 总间距 = 20 + 30 = 50px

题目2：以下代码的最终效果？ ​

html
<style>
  .parent {
    overflow: hidden;  /* BFC */
    background: lightblue;
  }
  .child {
    margin-top: 50px;
    background: lightcoral;
  }
</style>

<div class="parent">
  <div class="child">Child</div>
</div>

答案：.child的margin-top: 50px不会穿透.parent

解析：

  • .parent创建了BFC
  • BFC的特性：阻止外部margin穿透到内部，也阻止内部margin穿透到外部
  • 所以.child的margin-top会在BFC内部生效，不会导致.parent整体下移
  • .parent的顶部会有50px的padding效果（实际上是child的margin）

题目3：如何实现一个不受外部margin影响的容器？ ​

css
.safe-container {
  display: flow-root;  /* 创建BFC */
  /* 现在外部元素的margin不会穿透进来 */
  /* 内部元素的margin也不会穿透出去 */
}

题目4：Flex/Grid容器的子元素还会margin合并吗？ ​

css
.flex-container {
  display: flex;
  flex-direction: column;
}
.flex-item {
  margin: 20px 0;
}

答案：不会！Flex和Grid容器中的子元素不会发生margin合并。

┌─────────────────────────┐
│  Flex Container         │
│  ┌─────────────────┐    │
│  │  Item 1         │    │  margin-bottom: 20px
│  └─────────────────┘    │
│  ┌─────────────────┐    │  margin-top: 20px
│  │  Item 2         │    │
│  └─────────────────┘    │
│                         │
│  实际间距 = 40px（不会合并）│
└─────────────────────────┘

这是现代布局中推荐用Flex/Grid代替传统块级布局的原因之一。

============================================================

四、速记口诀 ​

============================================================

Margin合并：

"垂直相邻才合并，水平永远不会； 兄弟父子空元素，三种场景记心间； 浮动定位行内块，Flex Grid来阻断； 触发BFC最省事，overflow hidden一把梭。"

BFC：

"BFC是个独立国，里外元素不干涉； 浮动元素不重叠，清除浮动靠包含； overflow hidden最常用，flow-root最现代； 两栏布局自适应，margin穿透它来拦。"

============================================================

高度坍塌（父容器高度为0）—— 原因与解决方案 ​

  • 基础认知（是什么）：

    • 现象：父容器内所有子元素都浮动（float:left/right） 或绝对定位（position:absolute/fixed），导致父容器无法感知子元素的高度，最终高度变为 0，像“塌”了一样。
    • 核心原因：浮动/绝对定位让子元素脱离文档流，父容器计算高度时不包含它们。

  • 进阶原理（BFC - 块级格式化上下文）：

    • BFC 是 CSS 布局的一块独立区域，内部元素的布局不会影响外部。触发 BFC 的父容器会包含内部浮动元素，从而解决高度坍塌。

  • 解决方案（4种，按推荐顺序）：

    1. 父容器触发 BFC（最优雅）：

      • overflow: hidden/auto（触犯 BFC，且不影响布局）。
      • display: flex / display: grid（现代布局，自带 BFC）。
      • position: absolute（不推荐，会脱离正常流）。

    2. 伪元素清除浮动（经典）：

      css
      .parent::after {
  content: '';
  display: block;
  clear: both;
}

    3. 父容器固定高度（不灵活，内容溢出就崩）。

    4. 在浮动元素后面加空 <div style="clear:both"></div>（违背语义化，已过时）。

  • 实战结合（你的项目）：

    “在 IRMP 报告预览页，我使用 display: flex 做多栏布局，天然解决了高度坍塌问题。但在维护一些旧版 Vue2 组件时，看到同事用 float 做横向滚动列表导致塌陷，我统一改成了 overflow: hidden 触发 BFC 的方案，并封装成混入（Mixin），一行代码搞定。”

最近更新