CSS 中的高度坍塌

阳光穿透心脏的1/2处 2022-05-27 04:35 144阅读 0赞

首先，抛出一段代码引出本篇的主题：CSS 中的高度坍塌。

> ps：代码可以复制出去运行哦~

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高度塌陷</title>
    </head>
    <style> .red-box { border: 10px solid red; } .blue-box { float: left; background-color: blue; width: 100px; height: 100px; } .green-box { height: 100px; background-color: green; } </style>
    <body>
        <div class="red-box">
            <div class="blue-box"></div>
        </div>
        <div class="green-box"></div>
    </body>
    </html>

下面是我们的期望效果图：

![这里写图片描述][70]

在 `red-box` 中有一个 `float:left` 的 `blue-box`，下面是 `green-box`。

然而，骨感的结果：

![这里写图片描述][70 1]

这就是 CSS 中子元素脱离文档流导致的**高度坍塌**问题，接下来我们会来分析下这个问题，以及对此的解决方案。

> ###### 问题描述： ######
> 
>   在文档中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度坍塌。  
>   
>

#### 解决措施 ####

--------------------

在了解具体解决措施之前，我们有必要了解一下 `BFC(Block Formatting Context)` 是个啥。  
  根据W3C的标准，在页面中元素都一个隐含的属性叫做 `Block Formatting Context`，简称 `BFC`，该属性可以设置打开或者关闭，默认是关闭的。

**当开启元素的BFC以后，元素将会具有如下的特性**：

*  父元素的垂直外边距不会和子元素重叠
 *  开启BFC的元素不会被浮动元素所覆盖
 *  开启BFC的元素可以包含浮动的子元素

**如何开启 BFC：**

*  float的值不为none。
 *  overflow的值为auto,scroll或hidden。
 *  display的值为table-cell, table-caption, inline-block中的任何一个。
 *  position的值不为relative和static。

通俗一点，可以把将 BFC 属性打开的元素理解为一个封闭的大箱子，箱子内部的子元素无论如何翻江倒海（设置浮动、margin啥的），都不会影响到外部。

了解了 BFC 后，让我们从上面的开启 BFC 方式中挑选一个，我们这里选择 `overflow: hidden` 这个对页面其他元素影响较小的方式。

打开 BFC 属性后的代码（设置 `overflow: hidden`）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高度塌陷</title>
    </head>
    <style> .red-box { border: 10px solid red; overflow : hidden; //所加代码~ } .blue-box { float: left; background-color: blue; width: 100px; height: 100px; } .green-box { height: 100px; background-color: green; } </style>
    <body>
        <div class="red-box">
            <div class="blue-box"></div>
        </div>
        <div class="green-box"></div>
    </body>
    </html>

实现效果就是我们上面呈现的期望效果了。

[70]: /images/20220527/aac59a54cab548009d7558edf075d120.png
[70 1]: /images/20220527/29d04f5d4f2d4d1e84e08ede36b9bfb5.png