CSS盒子模型——高度塌陷问题

最新推荐文章于 2024-01-07 09:54:37 发布

非早起选手

最新推荐文章于 2024-01-07 09:54:37 发布

阅读量583

点赞数 1

分类专栏：前端基础文章标签： CSS布局浮动边距塌陷 margin塌陷解决方案

本文链接：https://blog.csdn.net/zg0601/article/details/120838242

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

一、相邻（兄弟）盒子塌陷

1、描述

若两相邻兄弟盒子上外边距相同，给其中一个盒子设置浮动类型，另一个盒子的左外边距设置为与它的兄弟盒子宽度相同时（也可以不设置，第一个盒子的大小大于等于第二个盒子是也可以直接观察到效果），两个盒子都能够全部显示在页面内容区域，但是这两个盒子无法对齐。

例：

<style>

    #d1{

        width: 300px;

        height: 300px;

        margin-top: 10px;

        background-color: dodgerblue;

        float: left;

    }

    #d2{

        width: 300px;

        height: 300px;

        margin-top: 10px;

        background-color: darkviolet;

        margin-left: 300px;

    }

</style>

<body>

    <div id="d1"></div>

    <div id="d2"></div>

</body>

浏览器效果如下：

若不设置第二个盒子左外边距效果：

若设置第二个盒子左外边距效果：

2、解决办法

①添加一个父盒子，并设置父盒子的上边框。（此方法有背景颜色局限性）

在上述例子下进行：

<style>

    .c1{

        border-top: 1px solid white;

        clear: both;

    }

    #d1{

        width: 300px;

        height: 300px;

        margin-top: 10px;

        background-color: dodgerblue;

        float: left;

    }

    #d2{

        width: 300px;

        height: 300px;

        margin-top: 10px;

        background-color: darkviolet;

        margin-left: 300px;

    }

</style>

<body>

    <div class="c1">

        <div id="d1"></div>

        <div id="d2"></div>

    </div>

</body>

浏览器效果如下：

②添加一个父盒子，并且不给设置为浮动类型的盒子设置上外边距。

以上述例子进行：

<style>

    .c1{

        /* border-top: white solid 1px; */

        /* clear: both; */

    }

    #d1{

        width: 300px;

        height: 300px;

        /* margin-top: 10px; */

        background-color: dodgerblue;

        float: left;

    }

    #d2{

        width: 300px;

        height: 300px;

        margin-top: 10px;

        background-color: darkviolet;

        margin-left: 300px;

    }

</style>

<body>

    <div class="c1">

        <div id="d1"></div>

        <div id="d2"></div>

    </div>

</body>

浏览器效果如下：

二、父子嵌套margin塌陷

1、出现的原因：

当父元素没有设置足够大小时，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（即脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其他非浮动的可见元素时，父盒子的高度就会直接塌陷为零。

2、解决办法

①将盒子大小固定。给每个盒子设置固定的width和height，直到合适为止。

优点是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面；

缺点是非自适应，浏览器的窗口大小直接影响用户的体验。

②给外部的父盒子也添加浮动，让其脱离标准文本流。

优点是方便；

缺点是对页面的布局不是很友好，不易维护。

③给父盒子添加overflow属性。

overflow: auto ; （有可能出现滚动条，影响美观）

overflow: hidden ;（有可能会带来内容不可见的问题）

④在父盒子中最下方引入清除浮动快。（<br style="clear:both";>）

不推荐使用，因为引入了不必要的冗余元素。

⑤after伪类清除浮动。

外部盒子的after伪元素设置clear属性。

#parent:after{
                clear: both;

                content: "";

                width: 0;

                height: 0;

                display: block;

                visibility: hidden;

}

这种方法是纯CSS解决浮动造成盒子塌陷的方法，没有引入任何冗余元素。但是低版本IE不兼容。