高度塌陷问题及其解决方法

最新推荐文章于 2023-06-16 11:21:32 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2023-06-16 11:21:32 发布

阅读量256

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46420078/article/details/120813185

版权

高度塌陷问题

解决方法

高度塌陷问题

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

产生原因：

当给所有的子元素添加浮动，而父元素没有设置高度时最近的父元素高度是塌陷的(没有高
度)。
原因是因为浮动之后该元素不占浏览器的位置(空间)，浮动之后是悬浮的状态(飘着的)----脱离文档流。

举例说明：

<style>
    .l-box{
        width: 300px;
        border: 15px solid red;
    }
    .s-box{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<body>
    <div class="l-box">
        <div class="s-box"></div>
    </div>
</body>

在页面中放一个盒子l-box,在它里面加了一个小盒子s-box，以上代码中设置了小盒子的宽和高，大盒子的宽，运行结果：

在文档流定位中，父元素的高都默认是被子元素撑开的高度。

给子元素添加浮动属性：

.s-box{
        width: 100px;
        height: 100px;
        background-color: royalblue;
        float: left;
    }

此时我们会发现子元素的位置没有发生变化，而父元素高度变化，发生了高度塌陷。

解决方法

方案一：给父元素一个固定的高度

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

缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，浏览器的窗口大小直接影响用户体验，不推荐使用。

方案二：给父元素添加属性 overflow: hidden或overflow:auto;

优点：浏览器支持好，简单；

缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉;overflow:auto；可能会出现滚动条，影响美观。

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式
div{
    clear: both;
    height: 0;
    overflow: hidden;
}
优点：所有浏览器都支持，并且容器溢出不会被裁剪；

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

方案四：万能清除浮动法（after伪类清除浮动）

外部盒子的after伪元素设置clear属性。具体设置样式如下：
父元素::after{
        content: "";
        height: 0;
        clear: both;
        overflow: hidden;
        display: block;
        visibility: hidden;
    }
优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

方案五：给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

方案六：给父元素添加属性display:table;将div属性变成表格

缺点：会产生新的问题，不推荐使用。

方案七:给父元素添加属性zoom:1;同时在子元素结尾添加br标签，设置属性clear:both;(不推荐使用）
父元素{
        width: 300px;
        border: 15px solid red;
        /* display: table; */
        zoom: 1;
    }
 br{
        clear: both;
    }

陛下，再来一杯娃哈哈

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
高度塌陷问题及其解决方法

高度塌陷问题当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。举例说明：<style> .l-box{ width: 300px; border: 15px solid red; } .s-box{ width: 100px; .
复制链接

扫一扫