核心提示：1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Trans...
1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用p来占布局</title>
<script type="text/javascript" src="https://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>
<style>
.p1,.p2{
width:100px;
height:100px;
background-color:red;
margin:20px;
/*float:left;
clear:left;*/
}
</style>
</head>
<body>
<p class="p1"></p>
<p class="p2"></p>
<script>
</script>
</body>
</html>
2.普通元素才会发生margin重叠，如果是float元素，就不会发生。margin是两者相加之和
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用p来占布局</title>
<script type="text/javascript" src="https://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>
<style>
.p1,.p2{
width:100px;
height:100px;
background-color:red;
margin:20px;
float:left;
clear:left;
}
</style>
</head>
<body>
<p class="p1"></p>
<p class="p2"></p>
<script>
</script>
</body>
</html>
3.父子元素，无浮动，发生重叠
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用p来占布局</title>
<script type="text/javascript" src="https://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>
<style>
.father{
width:400px;
height:400px;
background-color:gray;
margin:20px;
}
.child1{
width:100px;
height:100px;
background-color:red;
margin:20px;
/*float:left;*/
}
.child2{
width:100px;
height:100px;
background-color:red;
margin:30px;
/*float:left;*/
}
</style>
</head>
<body>
<p class="father">
<p class="child1"></p>
<p class="child2"></p>
</p>
<script>
</script>
</body>
</html>
4.父子元素，无浮动，发生重叠
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用p来占布局</title>
<script type="text/javascript" src="https://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>
<style>
.father{
width:400px;
height:400px;
background-color:gray;
margin:20px;
}
.child1{
width:100px;
height:100px;
background-color:red;
margin:20px;
float:left;
}
.child2{
width:100px;
height:100px;
background-color:red;
margin:30px;
float:left;
}
</style>
</head>
<body>
<p class="father">
<p class="child1"></p>
<p class="child2"></p>
</p>
<script>
</script>
</body>
</html>
