CSS里的坑（1）之高度塌陷

最新推荐文章于 2024-05-18 06:08:21 发布

恬静的滚水

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量135

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44334581/article/details/104451311

版权

在正常文档流中，当父元素没有设置高度时，子元素的高度就能撑起父元素，相当于子元素的高度多高父元素高度就多高，理论是这样，但在实际应用时，子元素的属性经常改变，父元素也会受到影响，例如：高度塌陷。

高度塌陷 的原因：
写页面时经常会遇到当父元素没有设置高度，子元素设置浮动时，下面的其他元素会顶到上边出现这种一下这种状况，就是叫 高度塌陷。

出现 高度塌陷 情况：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box1 {
            /* 父元素设置边框 */
            border: 2px solid blue;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
            /*子元素设置浮动*/
        }
        
        .box3 {
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

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

    <div class="box3"></div>
</body>

</html>

效果：
在这里插入图片描述
解决浮动带来的 高度塌陷 问题

方法1：给父元素设置固定高度
这种方法可以简单的解决高度塌陷的问题，但需要知道父元素的高度，不推荐使用。
方法2：给父元素设置overflow：hidden
这种方法也代码简单，但会影响到其他需要溢出效果的实现（如下拉菜单），不推荐使用。
方法3：设置浮动 ▲
有很多种浮动方法可以解决高度塌陷的问题
这里推荐大家使用没有副作用的一种万能清除浮动法

给父元素设置伪类清除浮动

.box1:after {
            content: "";
            display: block;
            clear: both;
        }

:after 伪元素在元素之后添加内容
content:”” 使生成的内容为空
display:block 使生成的内容转换为块级元素(块级元素才能清除浮动)
clear:both 清除掉子元素浮动带来的影响

设置浮动解决高度塌陷情况：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box1 {
            /* 父元素设置边框 */
            border: 2px solid blue;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
            /*子元素设置浮动*/
        }
        
        .box1:after {
            content: "";
            display: block;
            clear: both;
        }
        
        .box3 {
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

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

    <div class="box3"></div>
</body>

</html>

效果：
浮动解决高度塌陷
这里推荐把万能清除浮动法写在通用的样式里，因为代码量偏多。

        .clear:after {
            content: "";
            display: block;
            clear: both;
        }

这样就可以解决高度塌陷问题了。

结语：第一次写技术博客，请多多指教！

恬静的滚水

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS里的坑（1）之高度塌陷

在正常文档流中，当父元素没有设置高度时，子元素的高度就能撑起父元素，相当于子元素的高度多高父元素高度就多高，理论是这样，但在实际应用时，子元素的属性经常改变，父元素也会受到影响，例如：高度塌陷。高度塌陷的原因：写页面时经常会遇到当父元素没有设置高度，子元素设置浮动时，下面的其他元素会顶到上边出现这种一下这种状况，就是叫高度塌陷。出现高度塌陷情况：<!DOCTYPE html&...
复制链接

扫一扫