第一种
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
#a1{
200px;
height:200px;
border:1px solid red;
margin-bottom:20px;
}
#a2{
margin-top:20px;
100px;
height:100px;
display:inline-block;/*或者绝对定位（position：absolute）或者是浮动元素*/
border:1px solid black;
}
</style>
</head>
<body>
<div id="a1">
</div>
<div id="a2">
</div>
</body>
第二种
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
#container{
overflow:hidden;
zoom:1;
}
#a1{
border:1px solid red;
200px;
height:200px;
background:green;
margin-bottom:20px;
}
#a2{
border:1px solid red;
200px;
height:200px;
background:red;
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="a1">
</div>
</div>
<div id="container">
<div id="a2">
</div>
</div>
</body>
</html>
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠
1. float不为none
2. overflow不为visible
3. display设为‘table-cell’, ‘table-caption’, 或‘inline-block’
4. position既不是static也不是relative
5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context