margin 塌陷bug 触发bfc

1.bfc block format context

2.如何触发一个盒子的bfc

　　position:absolute;

　　display: inline-block

　　float:left/right;

　　overflow:hidden;

<html>
<head>
    <link rel="stylesheet" href="cs2.css">
</head>
<body>
    <div class="wapper">
        <div class="content"></div>
    </div>
  
</body>
</html>

2.css 代码

*{
    margin: 0;
    padding: 0;
}
.wapper{
    width: 100px;
    height: 100px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: black;
}

    /* overflow: hidden; */
    /* position:absolute; */
    /* display: inline-block */
　　 
    /* border-top: 1px solid red; */

.content{
    margin-left: 50px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: green;
}

　3. margin 合并问题

<html>
<head>
    <link rel="stylesheet" href="cs2.css">
</head>
<body>
    <!-- margin 合并问题 -->
    <div class="demo1">1</div>
    <div class="wapper">
        <div class="demo2">2</div>
    </div>
   

</body>
</html>

3. css

*{
    margin: 0;
    padding: 0;
}
.demo1{
    background-color: red;
    margin-bottom: 100px;    
}
.demo2{
    background-color: green;
    margin-top: 100px; 
}
/* margin 合并问题 */
.wapper{
    overflow: hidden;
}

 4.结论 margin问题一般不解决，直接设置margin-bottom:200px;

posted @ 2018-11-28 23:25  流星小子  阅读(224)  评论(0)    收藏  举报