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{
     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;
     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;

相关阅读:
Python 虚拟环境 virtualenv
Python
开发语言之---Java
LINUX系统
关系型数据库之MySQL
开发语言之---Python
框架之---Django
递归/面向过程编程
迭代器/生成器函数及协程函数的编写和使用
装饰器的编写及使用

原文地址：https://www.cnblogs.com/gylhaut/p/10035738.html