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;