什么是高度塌陷和解决基本方法

Jocks5

已于 2022-05-05 11:21:21 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

于 2022-04-25 16:21:05 首次发布

本文链接：https://blog.youkuaiyun.com/Jocks5/article/details/124407746

浮动元素会使父元素高度丢失，引发高度塌陷，导致页面布局混乱。解决方法包括创建BFC（块级格式化上下文），例如通过设置`overflow: hidden`，或者使用`::after`伪元素结合`clear:both`。此外，`clearfix`类也可用于同时解决高度塌陷和外边距重叠问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后，子元素会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的问题，我们必须解决。

二、解决方法

在了解高度塌陷之后，我们就要了解与其相关的一个东西BFC

BFC（Block Formation Contex）块级格式化环境

BFC是一个CSS中隐藏属性，可以为一个元素开始BFC

开启BFC该元素会变成一个独立的布局区域

2.1开启BFC

元素开启BFC后的特点：

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC：

1.设置元素的浮动（不推荐）

2.设置为行内块元素（不推荐）

3.将元素的overflow设置为一个非visible的值

常用的方式为元素设置：overflow：hidden开启BFC

2.2使用after伪元素解决高度塌陷（完美方案）

<style>
    .box{
        border:18px red solid;
    }
    .box2{
        width:100px;
        height:100px;
        float:left;
    }
    .box::after{
        display:block;
        clear:both;
    }
</style>

2.3设置clearfix

clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当我们遇到这些问题的时候，直接使用clearfix这个类即可

.clearfix::before,.clearfix::after{
     content:'';
     display:table;
     clear:both;
}