假设现在有一个红色box和一个绿色box。
红色box在上，绿色box在下。
红色box设置float: left，绿色box使用clear:both清除浮动。
请问，绿色box的哪个上边缘（content box的上边缘、padding box的上边缘、border box的上边缘、margin box的上边缘）与红色box的那个下边缘相接触？
在以前，我会以为是绿色box的margin box的上边缘与红色box的margin box的下边缘相接触。
因为相对定位、绝对定位等都是以margin box为准的，并且红色box是浮动盒，不会与下方的盒子产生margin合并。
嗯，合理。
然而，事实上却是，绿色box的border box的上边缘与红色box的margin box的下边缘相接触。
下面看代码和运行效果：
<div class="box1"></div> <div class="box2"></div> <style> .box1 { width: 100px; height: 100px; margin-bottom: 10px; background-color: red; float: left; } .box2 { width: 100px; height: 100px; margin-top: 20px; background-color: green; clear: both; } </style>
根据CSS2.1规范相关章节（http://www.ayqy.net/doc/css2-1/visuren.html#clearance），上图所示的红色box和绿色box之间的空间名为clearance（间隙）。
clearance的高度由设置clear的盒子上方的浮动盒的margin-top决定。