margin 塌陷bug 觸發bfc
阿新 • • 發佈：2018-11-28
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;