高度塌陷原因及其解决办法

最新推荐文章于 2023-08-20 13:59:37 发布

一蓑烟雨..

最新推荐文章于 2023-08-20 13:59:37 发布

阅读量2.9k

点赞数 3

分类专栏： html\css 文章标签： html

本文链接：https://blog.csdn.net/weixin_44713688/article/details/107339581

版权

html\css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

html（6）高度塌陷

1.原因：

当父元素没有添加高度（高度自适应），而子元素脱离文档流的时候（当子元素设置了float或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。

设计原因：高度塌陷设计原理

2.解决方法：

<!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: 500px;
            height: 500px;
            background-color: red;
        }

        .box1{
            background-color: blue;
            width: 300px;
            height: 300px;
            margin-top: 100px;

        }

    </style>
</head>

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

方案一：给父元素加overflow: hidden；

 .box{
            width: 500px;
            height: 500px;
            background-color: red;
            overflow: hidden；
        }

方案二：给父元素添加border;

 .box{
            border: 3px solid black ; 
            width: 500px;
            height: 500px;
            background-color: red;
        }

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式

div{
    clear: both;
    height: 0;
    overflow: hidden;
}

缺点：在页面中添加无意义的div，容易造成代码冗余。

方案四：万能清除浮动法

在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

建议使用

方案五：给父元素添加padding;

 .box{
            width: 500px;
            height: 500px;
            background-color: red;
            padding: 0.1px;
        }

一蓑烟雨..

关注

3
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
高度塌陷原因及其解决办法

html（6）高度塌陷1.原因：当父元素没有添加高度（高度自适应），而子元素脱离文档流的时候（当子元素设置了float或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。设计原因：高度塌陷设计原理2.解决方法：方案一：给父元素一个固定的高度缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。方案二：给父元素添加属性 overflow: hidden;缺点：当子元素有定位属性时，设置 overflow: hidden;
复制链接

扫一扫