前端必会的 HTML+CSS 常用技巧之解决父元素高度消失或最小高度不能自适应问题

最新推荐文章于 2024-03-24 12:38:43 发布

zhuangvi

最新推荐文章于 2024-03-24 12:38:43 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Zhuangvi/article/details/105472197

版权

HTML + CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端必会的 HTML+CSS 常用技巧之解决父元素高度消失或最小高度不能自适应问题

一、问题阐述

问题 1：高度消失

先解释一下什么是高度消失（高度消失也叫高度塌陷）如下图所示：

上图的代码如下：

    <style>
        .box{
            width: 600px; background: pink; margin: 0 auto;
        }
        .box1{
            width: 150px; height: 80px; background: #ccc; margin: 5px;
            float: left;
        }
    </style>
    
    <div class="box">
        <div class="box1"></div>
    </div>

正常情况下，默认是子元素会把父元素的高度撑开，然而并没有；从图中我们可以看出，父元素相当于是“消失”了。
当我们打开控制台查看时，发现并没有，该元素以及设置的css属性依然在：
高度塌陷2
这种情况就是高度塌陷，是指在子元素设置了浮动,父元素没有设置高度的情况下,父元素会出现高度塌陷！

问题 2：父元素设置了最小高度但不能实现高度自适应

父元素高度不能自适应问题
最小高度（min-height：当内容增多的时候，内容会把容器撑开；当内容减少的时候，容器会保持最小高度）
如下图所示：
高度塌陷3
我们的初衷是实现高度自适应（随着子元素的增加，元素的高度随之增加，且不改变原始布局），但是很明显，父元素是设置了最小高度min-height的，却并没有实现我们的需求。

二、解决方案

其实，我们都已经发现了出现这些问题的根本原因就是浮动：float，那么我们又要如何解决这些问题呢？下面就让我们一起来看一下解决方案以及各自的优缺点。

第一个方法

给父元素添加溢出属性：overflow: hidden;
代码如下：

    <style>
        .box{
            width: 600px; background: pink; margin: 0 auto;
            min-height: 100px;
            overflow: hidden;
        }
        .box1{
            width: 150px; height: 80px; background: #ccc; margin: 5px;
            float: left;
        }
    </style>

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

优点：简单；
缺点：由于设置了 overflow: hidden; （溢出隐藏），那么也会隐藏掉其他的作用在当前元素上的其他元素或内容。

第二个方法

在浮动元素的下面添加一个空的块状元素，并且给空元素设置样式{clear:both;} （清除浮动！）
注意是块状元素！块状元素！块状元素！
代码如下：

    <style>
        .box{
            width: 600px; background: pink; margin: 0 auto;
            min-height: 100px;
        }
        .box1{
            width: 150px; height: 80px; background: #ccc; margin: 5px;
            float: left;
        }
        .clear_fix{
            clear: both;
        }
    </style>

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

优点：简单，并且不会有影响布局。
缺点：当一个项目有很多需要添加浮动的元素时，为了解决以上问题就会出现很多没有意义的空元素，形成代码的冗余，平白消耗性能。

第三个方法

俗称万能清除法，利用伪对象选择器:after
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px; background: pink; margin: 0 auto;
            min-height: 100px;
        }
        .box1{
            width: 150px; height: 80px; background: #ccc; margin: 5px;
            float: left;
        }
        .clear_fix::after{
            content: ".";
            display: block;
            clear: both;
            height: 0px;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="box clear_fix">	// 添加 万能清除法
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>
</html>

注意：万能清除法是添加在出现问题的元素上的。

优点：完美解决问题，并且不会有任何弊端。
缺点：缺点我只能说代码量多了些，不够简单。

完美效果如下：
解决方案
好的，以上就是本人对此的粗浅认识，如有不足之处，望诸位大神们不吝赐教，谢谢！

如果对您有所帮助，不妨点个赞谢谢！

zhuangvi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必会的 HTML+CSS 常用技巧之解决父元素高度消失或最小高度不能自适应问题

前端必会的 HTML+CSS 常用技巧之解决父元素高度消失或最小高度不能自适应问题一、问题阐述问题 1：高度消失问题 2：父元素设置了最小高度但不能实现高度自适应二、解决方案第一个方法第二个方法第三个方法一、问题阐述问题 1：高度消失先解释一下什么是高度消失（高度消失也叫高度塌陷）如下图所示：上图的代码如下： <style> ...
复制链接

扫一扫