1. 程式人生 > >margin 塌陷bug 觸發bfc

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;