margin塌陷问题:
子元素和父元素在垂直方向上的移动有问题,子元素不能相对与父元素在垂直方向上移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div id = 'one'>
<div id = 'two'></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
#one{
margin-left:50px;
margin-top:100px;
width:200px;
height:200px;
background-color:black;
}
#two{
margin-left:50px;
margin-top:50px;
width:100px;
height:100px;
background-color:green;
}
运行结果:
子元素不能相对与父元素在垂直方向上移动
解决方案:
使用bfc解决
触发bfc的方法:
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden; //溢出父元素的部分隐藏