CSS的高度塌陷问题_高度塌陷css-CSDN博客

本文链接：https://blog.csdn.net/DS153/article/details/119517197

CSS的高度塌陷问题

前言
什么是高度塌陷？
解决高度塌陷的四种方法
总结

前言

我们在编辑CSS的时候，经常会使用到很多的工具，其中包括了使用标准流，浮动，定位来进行各种各样的网页布局。在这个过程中，浮动在进行设置时往往会出现一些问题，接下来就让我们来看看，在编写CSS语言的时候，浮动可能带来的问题。

什么是高度塌陷？

我们在进行网页布局的时候，父盒子的div为了放入很多内容来实现大量的篇章，所以选择不设置高度，用子盒子来撑开盒子。示例如下：

<style>
    .box {
        border: 1px solid blue;
    }
    
    .box1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

效果如下：
这是一个被子div撑开父盒子大小的网页布局

由于网页中div是属于标准流，会独自占领一行，当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。示例如下：

<style>
    .box {
        border: 1px solid blue;
    }
    
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

效果如下：
发生了高度塌陷
发生这样情况结果的原因在于浮动本身的特点，浮动的元素会脱标，脱离原本的标准流而不再占用一行，不占用原本的空间，因此父盒子高度为0时，子盒子选择了父盒子的上边框和左边框作为了自己的标准对齐，而父盒子因为没有高度，变成了没有任何内容的div。

解决高度塌陷的四种方法

为了解决浮动发生的高度塌陷问题，我们可以使用清除浮动来解决问题，清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

额外标签法

额外标签法也称为隔墙法，会在浮动元素末尾添加一个空的标签，原理是使用一个空盒子让浮动形成闭合浮动，只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
代码如下（示例）：

<style>
    .box {
        border: 1px solid blue;
    }
    
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
        <div style="clear: both"></div>
    </div>
</body>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

使用overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll，overflow是指溢出的部分，overflow直接使用将溢出部分删除，就可以让浮动盒子留在盒子里。

代码如下（示例）：

<style>
    .box {
        border: 1px solid blue;
        overflow: hidden;
    }
    
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

优点：代码简洁
缺点：无法显示溢出的部分

添加:after伪类元素

简单说就是第一种方法的升级版，可以直接在HTML里面的盒子里放入clearfix就可以直接实现清除浮动的效果。

<style>
    .box {
        border: 1px solid blue;
        overflow: hidden;
    }
    
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
    }
</style>
<body>
    <div class="box">
        <div class="box1 clearfix"></div>
    </div>
</body>

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器

给父级添加双伪元素

在CSS的style中写下双伪元素的伪类选择器之后，在父级的父子class内写入clearfix就可以实现清除浮动的效果，这个效果在各种大型的网站中使用较多

<style>
    .box {
        border: 1px solid blue;
        overflow: hidden;
    }
    
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
</style>

<body>
    <div class="box clearfix">
        <div class="box1"></div>
    </div>
</body>