css高度塌陷和重叠问题

最新推荐文章于 2025-05-16 19:33:02 发布

小全站攻城狮

最新推荐文章于 2025-05-16 19:33:02 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/cxy_xss/article/details/126329253

本文介绍了CSS布局中常见的高度塌陷和元素重叠问题，并详细探讨了四种解决方法，包括设置透明边框、内边距、转换元素display属性以及使用overflow属性触发BFC。同时，针对高度塌陷问题，提出了overflow隐藏和利用伪元素清除浮动两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给大家说一下css布局中高度塌陷和重叠问题

我们知道在css中默认的是流体布局，块级元素就是从上到下，行内元素就是从左到右
但是我们在父子嵌套的时候我们会发现个子div设置margin-top父div会跟着一起往下移动，这是我们最头疼的一件事，有的时候也会想不明白为什么子元素动父元素也会跟着动，这就是我们的父子重叠问题，
一旦子元素和父元素重叠，父元素就会跟着子元素一起向下移动，当然我们是为了解决问题，看下面解决办法

解决办法一：给父元素加一个边框，可以设置为透明色，这样父子就不会重叠了，不重叠子元素就不会影响父元素了 缺点还是会影响父元素的高度

border-top：1px solid rgba（0,0,0,0）

解决方法二：我们的目的是让子元素下移，所以我们可以给父元素加内边距来控制子元素的距顶部的距离 缺点会影响其他子元素的布局

padding-bottom:40px;

解决方法三：将子元素转为行内块这样也可以达到小哥 缺点会影响其他布局

display: inline-block;

解决方法四：溢出不可见触发bfc 缺点溢出部分不可见或者会出现滚动条
这里我们是触发了bfc，还有好方法看下面

overflow:hidden/scrool/auto; 只要不是visible就可以

下面给大家解决一下高度塌陷问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box{
            background-color: blue;
            border: 3px solid blue;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>

我们可以看到一但我们的box1浮动起来，父元素就没人支撑高度了，这就是高度塌陷，下面我们一起来解决高度塌陷
首先我们要知道为什么高度会塌陷，因为我们的box1浮动了脱了了文档流触发了bfc到了新的渲染区域，bfc块级格式化上下文，是一块独立的渲染区域，BFC的特性容器里面的元素不会影响外边元素布局，当然外部的元素也不能影响内部元素的布局
解决方法一： 我们可以给box加overflow: hidden;来解决这个高度塌陷问题不是最完美办法