解决父元素塌陷问题

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

十假杰出青年

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

阅读量2.2k

点赞数

分类专栏： css 文章标签： CSS 浮动元素父元素高度塌陷解决方案布局问题

本文链接：https://blog.csdn.net/m0_64288219/article/details/125153614

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

题前寄语

我们在写代码的时候经常会遇到一些问题，这是不可避免的，而这也正好可以帮助我们查漏补缺。只有碰见问题，我们才会想办法去解决问题，这样下次遇到问题才能游刃有余。相信学过css的你们肯定已经有所了解。话不多说上代码。。。。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style type="text/css">
    .box1 {
        background: red;
    }

    .kid {
        width: 100px;
        height: 100px;
        float: left;
    }

    .kid1 {
        background: yellow;
    }

    .kid2 {
        background: orange;
    }

    .box2 {
        width: 300px;
        height: 150px;
        background: blue;
        color: white;
    }
</style>

</head>



<body>
<div class="box1">
    <div class="kid kid1">子元素1</div>
    <div class="kid kid2">子元素2</div>
</div>
<div class="box2">box2</div>

</body>
</body>
</html>

我们期望的的结果

实际结果

通过结果我们不难发现，box1和box2同为块级元素，按标准文档流来，box2应该另起一行位于box1的下面一行，也就是位于子元素1和子元素2的下面。他们本来不应该有重叠的部分，但是box1和box2却跑到了子元素1和子元素所在区域的下面。造成这种状况的原因是父元素未设置高度，再加上子元素浮动导致父元素box1高度塌陷，父元素的高度无法把子元素包括在内。此时父元素高度为0，因为父元素未设置高度。这也导致box2仍然在box1高度为0的下面继续按标准文档流来布局，所以他们有了我们不期望有的重叠部分，box1和box2却跑到了子元素1和子元素所在区域的下面。

解决方法

1 给父元素设置高度（只适合高度固定的布局，若元素高度需要改动，仍需再改，不推荐）

.box1 {
        background: red;
        width: 200px;
        height: 100px;
    }

2 给父元素添加：overflow:hidden/auto/scroll都可以清除浮动（内容增多时不会自动换行，导致内容被隐藏，无法显示需要溢出的元素）

.box1{overflow:hidden}

3 给浮动元素末尾添加空标签，给空标签添加clear:both(会添加许多无意义的标签，导致代码冗余)

4 伪元素清除法：::afte{content:"";display:block;clear: both;height:0;overflow: hidden;visibility: hidden;}

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

码字不易，第一次写，有不对的地方请诸位评论指正，其中内容有所借鉴。

十假杰出青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决父元素塌陷问题

我们期望的的结果实际结果通过结果我们不难发现，box1和box2同为块级元素，按标准文档流来，box2应该另起一行位于box1的下面一行，也就是位于子元素1和子元素2的下面。他们本来不应该有重叠的部分，但是box1和box2却跑到了子元素1和子元素所在区域的下面。造成这种状况的原因是父元素未设置高度，再加上子元素浮动导致父元素box1高度塌陷，父元素的高度无法把子元素包括在内。此时父元素高度为0，因为父元素未设置高度。这也导致box2仍然在box1高度为0的下面继续按标准文档流来布局，所以他们有了我们不期望
复制链接

扫一扫

专栏目录