上下margin重合的问题

最新推荐文章于 2023-02-05 16:03:14 发布

LuckXinXin

最新推荐文章于 2023-02-05 16:03:14 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/LuckXinXin/article/details/111876660

版权

CSS 专栏收录该内容

293 篇文章 3 订阅

订阅专栏

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

例子：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }