当CSS中子元素浮动起来后导致父元素高度为空，该怎么解决？😬😬=-=在课堂上，老师提到了关于父元素高度塌陷的问题。现

问题的产生：

在课堂上，老师提到了关于父元素高度塌陷的问题。现在我们来复习总结一下。

分析：

我们来看父元素高度为0时是如何产生的？

结果：

屏幕截图 2024-12-24 143051.png

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
<style>
    .father{
      
        padding: 20px;
    }
    .son1{
        float: left;
    }
    .son2{
        float: right;
    }
</style>
</head>
<body>
    <div class="father">
        <div class="son1">我是大儿子</div>
        <div class="son2">我是二儿子</div>
    </div>
    <div>我是后面的跟屁虫</div>
</body>
</html>

原因：

子元素中的 “大儿子” ，“小儿子” 变成了浮动，脱离了文档流，导致父元素中高度塌陷，就会造成高度显示为0，
会导致后面文档流中的文字，形成环绕的效果，这就是为什么，‘跟屁虫’，没有在顶格的位置，而是到了中间偏右一点的位置。

如何解决呢？

这时候就要引出概念：

块级格式化上下文（Block Formatting Context，简称 BFC）是Web页面中一个独立的渲染区域，在这个区域内，元素按照特定规则进行布局，并且不会影响到该区域之外的元素。BFC的存在有助于解决一些常见的CSS布局问题，如浮动元素导致的父容器高度塌陷等。

BFC 的基本特性

内部盒子浮动和绝对定位的影响：在BFC中，浮动元素不会影响到外部的内容，而绝对定位元素则会相对于最近的非static（静态）定位祖先进行定位。

案例：

这个案例中，就不会出现围绕的效果了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC - Floats</title>
<style>
    .container {
        background: #f0f0f0;
        padding: 20px;
        border: 1px solid #ccc;
    }
    .float-box {
        float: left;
        width: 100px;
        height: 100px;
        background: tomato;
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>
</head>
<body>
<div class="container clearfix">
    <div class="float-box"></div>
</div>
    <!-- 浮动元素不会影响到外面的内容 -->
    <p>这段文字应该正常显示，不受浮动元素影响。</p>

</body>
</html>

外边距折叠：在一个BFC内，垂直相邻的两个块级元素的外边距会发生折叠，但在不同BFC之间的外边距不会发生折叠。

外边距折叠（Margin Collapse）是CSS布局中的一个特性，它发生在垂直方向上相邻的块级元素之间。当两个垂直方向上的外边距相遇时，它们不会简单地相加，而是合并为一个单一的外边距，其大小等于两个外边距中较大的那个。这种行为只在同一个BFC（Block Formatting Context）内发生。 案例1：
在这个例子中，两个 .box 元素之间的垂直外边距会发生折叠。虽然每个盒子都有 20px 的上和下外边距，但实际显示出来的间隔只有 20px，而不是预期的 40px，这两个外边距发生了折叠。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin Collapse Example</title>
<style>
    .box {
        margin: 20px;
        padding: 10px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>

解决：

当把box1和box2放入一个bfc中，box3单独一个bfc时，就消除了外边距折叠。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC Margin Collapse Example</title>
<style>
    .container {
        background-color: lightgray;
    
        /* 创建一个新的BFC */
        overflow: hidden; 
    }

    .box1 {
        margin-bottom: 20px;
        background-color: lightblue;
        padding: 10px;
    }

    .box2 {
        margin-top: 30px;
        margin-bottom: 40px;
        background-color: lightcoral;
        padding: 10px;
    }

    .box3 {
        margin-top: 50px;
        background-color: lightgreen;
        padding: 10px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="box1">Box 1 - 我有20px的下外边距。</div>
    <div class="box2">Box 2 - 我有30px的上外边距和40px的下外边距。</div>
</div>

<div class="container">
    <div class="box3">Box 3 - 我有50px的上外边距，并且与上面的盒子不在同一个BFC中。</div>
</div>

</body>
</html>

防止浮动干扰：创建了新的BFC的元素可以包含其内部的浮动元素，从而避免浮动元素对后续兄弟元素造成影响。

4. 计算宽度和高度：BFC中的元素根据其自身的宽度和高度属性以及内容来确定尺寸，而不受外部浮动元素的影响。

讲了那么多，大家还不知道怎么创建一个BFC吧？

创建 BFC 的方式

以下是一些可以触发创建新BFC的情况：

绝对或固定定位元素 (position 为 absolute 或 fixed)
行内块元素 (display 为 inline-block)
表格单元格 (display 为 table-cell)
表格标题 (display 为 table-caption)
块级替换元素（如 <img>、<video> 等）
元素具有 overflow 值不为 visible（例如 hidden、auto、scroll）
弹性盒模型元素 (display: flex 或 inline-flex)
网格布局元素 (display: grid 或 inline-grid)
使用 display: flow-root
CSS 列布局 (column-count 或 column-width 不为 auto）

解决问题：

在了解完BFC后，面对我们开头的问题当然是迎刃而解了，我们只需要在.father样式中加上 overflow:auto，就创建了一个BFC了。

  .father{
        overflow: auto;
        padding: 20px;
    }

总结：

通过学的知识，再进行拓展，这样就能掌握更多的能力！

希望我的文章对你有帮助，如有问题，也请指出。