<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
<style>
*{margin:0;padding:0;}
#box1{width: 200px; height:200px;border: 1px solid pink;margin: 80px;float:left;}
#box2{width: 200px; height:200px;border: 1px solid pink;margin-top:100px;margin-left:80px;clear:both;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>得到的显示如下：
我们都知道在没有给box1、2添加浮动的情况下会发生高度塌陷，margin的实际显示为100px，但是为什么当我们让box1向左浮动、box2clear：both时，margin实际显示为80px，而不是180px，有疑惑，求解答