block format context(bfc)
margin塌陷问题
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 哪里有比zyq更帅得人啊</title>
<link rel="stylesheet" href="lesson6.css">
</head>
<body>
<div class="wrapper"><div class="content"></div></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
}
.content{
margin-left: 25px;
margin-top: 200px;
width: 50px;
height: 50px;
background-color: green;
}
当子级的margin-top比父级的margin-top大时,两者会跟着一起动(margin塌陷)
如何触发一个盒子的bfc
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
(margin塌陷并不能完全解决,只能通过三种方式进行弥补)
弥补方法1:overflow:hidden; 子级超出父级部分被隐藏
弥补方法2:float:left/right;
弥补方法3:display:inline-block;
合并
<div class="demo1">1</div>
<div class="demo2">2</div>
.demo1{
background-color: red;
margin-bottom: 200px;
}
.demo2{
background-color: yellowgreen;
margin-top: 200px;
}
1和2 公用一个margin且为两者之间的最大值
解决办法(可以有但没有必要)
<div class="wrapper"><div class="demo1">1</div></div>
<div class="wrapper"><div class="demo2">2</div></div>
.wrapper{
overflow: hidden;
}