如何解决由浮动带来的高度塌陷？

越来越好的月

已于 2023-03-01 14:56:05 修改

阅读量101

点赞数 3

分类专栏： css初学---遇到的问题文章标签： css Powered by 金山文档

于 2023-02-28 20:16:13 首次发布

本文链接：https://blog.csdn.net/yuyuyuyuyuyyuuyu/article/details/129268828

版权

css初学---遇到的问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们总会碰到，当给子元素添加浮动后，父元素高度消失，从而引起页面布局混乱的问题。

下面是解决此问题的方法（如果有新的方法我会一一补充）（其实这些方法有一个共同点都是在给父元素找回高度）

1. 直接给父元素找回高度

2. 清除子元素的浮动

3. 伪元素清除浮动

4.触发BFC法（overflow）

何为高度塌陷

<div class="fa1_red">
        <div class="son1_green"></div>
    </div>
<div class="fa2_black"></div>

<style>
       
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            float:left;
        }
        .fa2_black{
            width: 400px;
            height: 200px;
            background-color: black;
        }
        .fa1_red{
            background-color: red;
        }
<style>

如左侧代码所示由于绿色的儿子开启了浮动，而导致父元素高度丢失，从而引起页面布局混乱。

未开启浮动之前，父元素由子元素撑开，高度等于子元素高度，如下图。

开启浮动后，子元素半脱离文档流（即活动位置被父元素限制，但已经不与父元素在同一平面。）父元素没有子元素撑开，失去了高度，如下图。父元素失去高度，原有位置不在占据，父元素下方兄弟元素，占据了他的位置。子元素开启了浮动，已经不与父元素和父元素的兄弟元素在同一品面，浮在他们上方。

解决办法

1.直接给父元素设置高度

<div class="fa1_red">
        <div class="son1_green"></div>
    </div>
<div class="fa2_black"></div>

<style>
       
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            float:left;
        }
        .fa2_black{
            width: 400px;
            height: 200px;
            background-color: black;
        }
        .fa1_red{
            background-color: red;
            height:200px;
        }
<style>

当给父元素设置高度后，父元素丢失的高度恢复了，因此就不会塌陷。恢复了原来的样子（给父元素设置为与子元素一样高，即找回了父元素原来的高度，也可以根据需要设置）

如下图

此方法，虽然也能够解决高度塌陷带来的问题，但存在弊端。

盒子内容的高度不能超过父盒子，若更改了内容高度就需要重新设置父元素高度。

2.清除子元素的浮动

<div class="fa1_red">
        <div class="son1_green"></div>
        <div class="son2"></div>
    </div>
<div class="fa2_black"></div>

<style>
       
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            float:left;
        }
        .son2{
               clear:both;
          }
        .fa2_black{
            width: 400px;
            height: 200px;
            background-color: black;
        }
        .fa1_red{
            background-color: red;
            height:200px;
        }
<style>

当在父元素中再加一个子元素，并清除其两侧的浮动，在我理解就是，清除浮动带来的影响，即高度丢失，这样父元素就找回了原来的高度。如图所示

由于父元素高度由内容确定，所以父元素中添加的内容影响着父元素的高度，所以不再限制父元素里的内容，可以多添加几个。

但这样子的方式，多了一个子元素，也就是多了一个结点，给浏览器增加了负载。

3.伪元素清除浮动

<div class="fa1_red">
        <div class="son1_green"></div>
        <div class="son2"></div>
    </div>
<div class="fa2_black"></div>

<style>
       
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            float:left;
        }
      
        .fa2_black{
            width: 400px;
            height: 200px;
            background-color: black;
        }
        .fa1_red{
            background-color: red;
            height:200px;
        }
        .fa1_red：：after{
           content:"";
           display:block;
           clear:both;
         }
<style>

给父元素添加伪类元素after意思就是，在父元素最后一个元素后添加内容，然后将其设置为块状，清除周围的浮动。原理与添加一个空的子元素相同，这不过这样更加方便，他永远会找最后一个元素后添加，不用因为前后多加元素而改写。

最终清除完效果如下

4.触发BFC法

<div class="fa1_red">
        <div class="son1_green"></div>
    </div>
<div class="fa2_black"></div>

<style>
       
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            float:left;
        }
        .fa2_black{
            width: 400px;
            height: 200px;
            background-color: black;
        }
        .fa1_red{
            background-color: red;
            overflow:hidden;
        }
<style>

给父元素添加overflow属性以触发BFC（即格式化上下文），父元素被格式化高度找回。

如下图:

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素