CSS中高度塌陷问题以及解决办法

最新推荐文章于 2023-07-14 08:00:00 发布

花花的公子

最新推荐文章于 2023-07-14 08:00:00 发布

阅读量906

点赞数 1

文章标签： css html css3

原文链接：https://zhuanlan.zhihu.com/p/372353210

版权

一.什么是高度塌陷

首先在DOM中，父元素div的高度在没有设定高度情况下是默认被子元素撑开，就是说父多高，子就有多高。可是在设定子元素为float：left/right后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

这样可能导致子元素对于父元素脱节，上移，导致整个界面布局混乱。一下是我设定的高度塌陷的实例：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <style type="text/css"> 
 
            .box1{ 
                /*为box1设置一个边框*/ 
                border: 10px red solid; 
 
            } 
 
            .box2{ 
                width: 100px; 
                height: 100px; 
                background-color: blue; 
                float: left; 
            } 
 
            .box3{ 
                 height: 100px; 
                 background-color: yellow; 
            } 
 
        </style> 
    </head> 
    <body> 
 
        <div class="box1"> 
            <div class="box2"></div> 
        </div> 
 
        <div class="box3"></div> 
 
    </body> 
</html>

结果：
在这里插入图片描述

二.解决方案

1.推介使用，单伪元素after清除浮动： after+zoom（最好用的，最推荐的，兼容性也很好）

.box1::after{
    content: "";/*伪元素内容为空*/
    display: block;/*非默认的就行，也可以是table等等*/
    height: 0;/*伪元素高度为0，不影响其他元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*不可见*/
}

效果：
在这里插入图片描述
2.给父元素设置固定高度（不推荐）
使用该方法后，父元素的高度就不能根据子元素自动撑高了，如果可以固定高度，可以使用这种方式，否则，不推荐这种方式。以下是我的做法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">

        .box1{
            /*为box1设置一个边框*/
            border: 10px red solid;
            width: 100px;
            height: 100px;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        .box3{
            height: 100px;
            background-color: yellow;
        }

        
    </style>
</head>
<body>

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

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

</body>
</html>

效果图：
在这里插入图片描述
3、额外标签法：加一个空div标签清除浮动（不推荐）

<body>
    <div class="box1"> 
        <div class="box2"></div> 
        !--加一个标签，清除浮动-->
        <div style="clear: both;"></div> 
    </div>
    <div class="box3"></div> 
</body>

缺点：因为html的原则是写出语义化的标签，这种方式会额外增加无意义的标签。

花花的公子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中高度塌陷问题以及解决办法

首先在DOM中，父元素div的高度在没有设定高度情况下是默认被子元素撑开，就是说父多高，子就有多高。可是在设定子元素为float：left/right后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。这样可能导致子元素对于父元素脱节，上移，导致整个界面布局混乱。</.box1/*为box1设置一个边框*/border;.box2width;height;;float;;
复制链接

扫一扫