什么叫高度塌陷？

最新推荐文章于 2022-05-15 13:40:12 发布

畅一凡

最新推荐文章于 2022-05-15 13:40:12 发布

阅读量1.6k

点赞数 2

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/ProgrammingWhite/article/details/104488005

版权

首先要知道高度塌陷是：浮动元素父元素高度自适应（高度塌陷）当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
简而言之就是但子元素设置浮动属性，父元素就会出现高度自适应，没有高度或者高度很小，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid red;
        } 
        .frist {
            width: 200px;
            height: 50px;
            border: 1px solid green;
        }
        .box1 {
            width: 200px;
            height: 80px;
            background: silver;
        }
    </style>
</head>
<body>
    <div class="box">
     box
        <div class="frist">frist</div>
    </div>
    <div class="box1">box1</div>
</body>
</html>

此时，是三个div块级标签显示在页面上
在这里插入图片描述
box、frist、box1三个div都有自己的空间放置其他元素，frist是嵌套在box里面的。但是当frist左浮动在box里时，就会出现高度塌陷的情况

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid red;
        } 
        .frist {
            width: 200px;
            height: 50px;
            float: left;
            border: 1px solid green;
        }
        .box1 {
            width: 200px;
            height: 80px;
            background: silver;
        }
    </style>
</head>
<body>
    <div class="box">
     box
        <div class="frist">frist</div>
    </div>
    <div class="box1">box1</div>
</body>
</html>

在这里插入图片描述
这个时候frist是box的子元素，box是父元素，当子元素frist添加浮动时，父元素box就会出现高度塌陷的情况，父元素里的内容会被挤到子元素后边。简而言之就是自己决定不了自己的家有多高，只能跟着房子里家居的高度调整自己的高度。
这就是高度塌陷的表现方式，下面我们来聊聊如何解决这个高度塌陷的问题。
方法一：给父元素添加声明overflow:hidden;(触发一个BFC)

overflow: hidden;

方法二: 在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;} （这样会多一个空的div增加代码长度）

    .k{clear:both; height:0; overflow:hidden;}
    <div class="k"></div>

方法三:添加CSS样式中伪元素after(格式如下，有些复杂)

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

方法四：给父元素添加浮动（方便简洁,不是很规范)

 float: left;

在最后说一句个人比较推荐解决高度塌陷的方法是给父元素添加声明overflow:hidden;

畅一凡

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
什么叫高度塌陷？

首先要知道高度塌陷是：浮动元素父元素高度自适应（高度塌陷）当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷简而言之就是但子元素设置浮动属性，父元素就会出现高度自适应，没有高度或者高度很小，例如：<!DOCTYPE html><html><head> &...
复制链接

扫一扫