margin塌陷问题

最新推荐文章于 2022-05-25 16:43:19 发布

nhw649

最新推荐文章于 2022-05-25 16:43:19 发布

阅读量93

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_46176479/article/details/107687679

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

问题描述：

由于子元素浮动了导致了子元素浮于父元素上方，让父元素高度为0，改变了父元素与子元素之间的位置关系，子元素脱离了原来的文档流，导致父元素高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            border: 2px dashed blue;
        }

        .child {
            background-color: red;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述

解决方案：在父元素中加入`overflow: hidden;`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            border: 2px dashed blue;
            overflow: hidden;
        }

        .child {
            background-color: red;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述

nhw649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷问题

问题描述：由于子元素浮动了导致了子元素浮于父元素上方，让父元素高度为0，改变了父元素与子元素之间的位置关系，子元素脱离了原来的文档流，导致父元素高度塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { b
复制链接

扫一扫