CSS高度塌陷问题（float塌陷&margin塌陷）

最新推荐文章于 2024-05-16 15:59:52 发布

命中。

最新推荐文章于 2024-05-16 15:59:52 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： css css3 html5

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/121212558

版权

1、每个盒子设定固定的width和height

2、给外部的父盒子也添加浮动

3、给父盒子添加overflow属性。

4、父盒子里最下方引入清除浮动块。

5、用after伪元素清除浮动(推荐使用)

6、给父盒子设置padding-top(不推荐)

二、margin塌陷

1. 同级元素塌陷

2、父子元素塌陷

一、float塌陷

1、问题

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

2、代码示例

<!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>Document</title>
    <style>
        .d1{
            background-color: chartreuse;
            width: 700px;
            height: auto;
        }
        .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="d1">父盒子
        <div class="d2">子盒子</div>
    </div>
</body>
</html>

      .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
            float: left;
        }

我们可以清楚的看到给子盒子浮动后，子盒子脱离文档流，被子盒子高度撑起的父盒子高度塌陷。

3、解决方法

最低0.47元/天解锁文章

命中。

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS高度塌陷问题（float塌陷&margin塌陷）

一、什么是盒子高度塌陷？1、解释当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。2、代码示例...
复制链接

扫一扫