08
2020
08

上下margin重合的问题

在重合元素外包裹一层容器,并触发该容器生成一个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属性。

        }

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。