【CSS 常见问题】三分钟解决 CSS 中 float 引起的父元素高度塌陷问题

3,097 阅读7分钟
原文链接: www.jianshu.com

CSS

前言

相信很多同学在网页布局过程中都用过float浮动布局,float可以让我们很方便的去布局,但是同时也带来了很多的问题,虽然现在很多人都推荐用Flex布局来替代浮动布局(不了解Flex可以在这里看这里 阮一峰的网络日志),但是IE11以下和一些低级别版本的浏览器对Flex的支持不太好,所以我们用好浮动布局还是很有必要的。这篇文章主要解决的是float的所引起的父容器高度塌陷问题,相信很多人都遇到过使用浮动时发现父容器没有撑开,以下我会给出几种解决方法,让大家不会在这个问题上再出错。

首先,我们先看一个简单的例子,看看什么是父元素高度塌陷
<style>
     .content{
         background-color: rgba(102, 102, 102, 0.35);
     }
     h1,p{
         /*float:left;*/
     }
     p{
         margin-top: 1rem;
         font-size: 1rem;
     }
</style>
<body>
<div class="content">
    <h1>沉默的大多数</h1>
    <p>  我现在写的东西大体属于文学的范畴,所谓文学,在我看来就是:先把文章写好看了再说,别的就不用管他妈的。除了文学,
        我想不到有什么地方可以接受我这些古怪想法。赖在文学上,可以给自己在圈子中找到一个立脚点。有这样一个立脚点,就可以攻击这个圈子,攻击整个阳的世界。</p>
    <p>几年前,我在美国读书。有个洋鬼子这样问我们:你们中国那个阴阳学说,怎么一切好的东西都属阳,一点不给阴剩下?当然,她这样发问,是因为她正是一个五体不全之阴人。但是这话也有些道理。话语权属于阳的一方,它当然不会说阴的一方任何好话。就是夫子也未能免俗,他把妇女和小人攻击了一通。这句话几千年来总被人引用,但我就没听到受攻击一方有任何回应。人们只是小心提防着不要做小人,
        至于怎样不做妇人,这问题一直没有解决。就是到了现代,女变男的变性手术也是一个难题,而且也不宜推广——这世界上假男人太多,真男人就会找不到老婆。</p>
</div>
</body>

这是上面代码的效果

我为h1p设置了一个父元素div,为了方便看到父元素,我设置了一个背景色,好,到目前为止,我们的页面没有任何问题,当我们为div的子元素h1p设置float的时候,

     h1,p{
         float:left;
    }

页面将出现如下问题:


父容器高度塌陷为零了

可以很明显的看到背景没有了,父容器的高度变为0px了,这是为什么呢?因为元素浮动之后,周围的元素会重新排列,按照姜维老师的话就是,浮动的元素就跟浮云一样,不会影响到我们地面上的人类(未浮动的元素),人类怎么排列和漂浮的云没有关系。
好了,现在浮动引起了问题,并且这种问题并不是我们想要的结果,所以我们现在要解决这种问题,让父元素表现一个正常的高度,我们现在提供五种方法去解决问题:

  • 一,在父元素底部加一行代码

      <body>
    <div class="content">
      <h1>沉默的大多数</h1>
      <p>  我现在写的东西大体属于文学的范畴,所谓文学,在我看来就是:先把文章写好看了再说,别的就不用管他妈的。除了文学,
          我想不到有什么地方可以接受我这些古怪想法。赖在文学上,可以给自己在圈子中找到一个立脚点。有这样一个立脚点,就可以攻击这个圈子,攻击整个阳的世界。</p>
      <p>几年前,我在美国读书。有个洋鬼子这样问我们:你们中国那个阴阳学说,怎么一切好的东西都属阳,一点不给阴剩下?当然,她这样发问,是因为她正是一个五体不全之阴人。但是这话也有些道理。话语权属于阳的一方,它当然不会说阴的一方任何好话。就是夫子也未能免俗,他把妇女和小人攻击了一通。这句话几千年来总被人引用,但我就没听到受攻击一方有任何回应。人们只是小心提防着不要做小人,
          至于怎样不做妇人,这问题一直没有解决。就是到了现代,女变男的变性手术也是一个难题,而且也不宜推广——这世界上假男人太多,真男人就会找不到老婆。</p>
    <div style="clear:both;"></div>
    </div>
    </body>
    我们在父元素底部增加了一行空的div标签,并且为其设置了样式
    clear:both;,以下是修改后的效果:

父元素又恢复高度了


这种方法通俗易懂,也容易掌握。
但是缺点是添加了无意义的空标签,违背了结构表现分离,给后期维护带来了问题。

  • 二,给父元素增加一行CSS

 div.content{
       float:left;
  }

这个意思就比较直白了,让父元素也一起浮动,父元素和子元素又一起排列了,所以父元素高度就可以恢复了,但是这很明显是一种将错就错的方法,父元素本来就不需要浮动,为了解决高度问题让父元素浮动又会引发其他问题。

  • 三,利用BFC来给父元素增加CSS

 div.content{
       overflow:auto;
  }

上面只是一种做法,你还可以加display:table-cell;display:table-caption;display:inline-block;position:fixed;position:absolute等等,你要问我为什么它们可以清除浮动,其实这些都是触发了BFC(块级格式化上下文),具体的我不解释了,大家可以看看这篇文章BFC神器背后的原理

  • 四,使用CSS中的after伪元素

给父元素div添加一个clearfix的class类,<div class="content clearfix">,然后设置CSS

  .clearfix:after{
        content: ".";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
   }

这种方法其实有点类似于第一种方法,不过这种方法是通过after伪元素来给父元素末尾添加一个看不见的clear:both;的块元素,来达到清除浮动的目的。其中 content: ".";是为了加一段内容,display: block;是为了让生成的元素以块级元素显示,占满剩余空间,height: 0px;是为了避免生成的内容避免原有布局的高度, visibility: hidden;是为了让生成的元素不可见。

  • 五,更优雅的改进——尼古拉斯大师方法

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

上述代码把display设置为table,可以创建一个匿名的表格单元,这个匿名的表格单元可以直接触发BFC,然后再直接设置content: " ";,把内容设置为一个空格,这样就节省了不必要的代码。
那加before伪元素是为了什么呢?加上before对于清除浮动没有什么必要性,主要目的是防止浏览器顶部的空白崩溃,即是指此盒子的margin-top与上一个盒子的margin-bottom会发生折叠,(在同一个BFC中两个毗邻的块级盒子在垂直方向(和布局有关系)的margin会发生折叠)。

现在大多数人都会采用最后一种方式来清除浮动,如果你还没有使用,建议快点学会哦,或者可以推荐给你的朋友,一分钟就可以掌握哦!觉得有用不妨点个赞吧!

参考资料:姜维_Wayne-《所向披靡的响应式开发》


本文对你有帮助?欢迎扫码加入前端学习小组微信群: