规范中此背后的逻辑是弯腰的，并且涉及清除规则和利润率下降的规则之间的复杂相互作用。
你可能熟悉的常规CSS盒模型，其中内容框包含一个内填充盒包含一个内边界框包含一个内缘盒：
对于clear设置为以外的元素，none此模型可能会引入一个附加组件：间隙。
除“ none”以外的其他值可能会导致清除。间隙可防止边距折叠，并充当元素边距顶部上方的间距。
换句话说，在这种情况下，盒子模型看起来更像这样：
但是，什么时候引入间隙，它应该有多大？让我们从第一个问题开始。规范说：
通过首先确定元素顶部边界的假定位置，可以计算出设置了“清除”的元素的间隙。如果元素的“ clear”属性为“ none”，则实际的顶部边界将位于该位置。
如果元素的顶部边框边缘的此假设位置未超过相关的浮动，则将引入间隙，并且边缘会根据8.3.1中的规则收缩。
让我们将此逻辑应用于提问者代码。记住，我们试图在下面的代码中解释第三个div的位置（添加了有助于可视化的背景）：
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>
让我们想象一下，按照规范要求，将clear其设置为none第三分区，而不是both。那么上面的代码段是什么样的？
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>
在这里，第三个div与两个浮动div重叠。可是等等; 为什么会这样呢？当然，允许浮动元素与块级元素重叠（根据Floats规范，“由于浮动中没有浮动，因此在浮动框之前和之后创建的未定位区块框会垂直流动，就好像该浮动不存在一样） ”，但是我们的第三个div上有很多负载，margin-top紧随两个浮动div之后；两个浮动div不应出现在主体顶部，而第三个div则应位于其下方200px下方吗？
不会发生这种情况的原因是，第三个div的边距塌陷到divs父级的边距中（在本例中为body，但是如果将所有三个div包装在父div中，则会发生相同的行为）。该折叠利润率规范（以下引用省略一些无关的细节）告诉我们：
相邻的垂直边距崩溃...
当且仅当以下情况时，两个边距相邻：
- 都属于流内块级框，它们参与相同的块格式上下文
- 没有线框，没有间隙，没有填充和没有边框将它们分开...
- 都属于垂直相邻的框边，即形成以下对之一：
在我们的示例中，第三个div当然不是人体的第一个子对象，而是它的第一个流入子对象。请注意，根据https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme：
如果某个元素是浮动的，绝对定位的或者是根元素，则该元素被称为流出。一个元素被称为在流如果不是乱流。
由于我们示例中的第一个和第二个div是浮动的，因此只有第三个div是流入的。因此，其上边距与其父对象的上边沿相邻，并且边沿崩溃-压低整个身体，包括两个浮动元素。因此，尽管有较大的div，但第三个div却与兄弟姐妹重叠margin-top。因此，在这种假设的情况下，第三个元素clear设置为none，我们满足以下条件：
元素的顶部边框边缘不超过相关的浮动
从而：
引入了清除功能，边距按照8.3.1中的规则崩溃
有多少通关？该规范为浏览器提供了两种选择，并提供了一些澄清说明：
然后将间隙量设置为以下较大者：
- 即使要清除的最低浮标的底部外边缘，也要放置块的边界边缘所需的数量。
- 将块的顶部边界放置在其假定位置所需的数量。
或者，将间隙精确设置为放置块的边界边缘所需的量，即使要清除的最低浮标的底部外边缘也是如此。
注意：在评估它们与现有Web内容的兼容性之前，都允许这两种行为。将来的CSS规范将需要一个或另一个。
注意：间隙可以为负或零。
在开始应用这些规则之前，我们立即遇到了麻烦。请记住，塌陷保证金，我们必须考虑到在假定情况下clear为none？好吧，在我们要计算要使用的游隙的这种非假设情况下，它并不存在，因为游隙的存在会抑制它。回想一下前面引用的8.3.1中的崩溃边距规则，该边距规则仅在以下情况下才邻接：
（添加了重点）。因此，第三个div的上边距和其父级的上边距不再相邻。我们可以按照上面引用的规则，通过保留clear: none但padding-top: 1px增加到正文中来模拟此示例前片段中的预清除场景。
body {
padding-top: 1px;
}
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>
现在，与利润率崩溃时不同，我们的第三个div舒适地低于其两个浮动兄弟姐妹。但是我们已经基于一种假设情况，即利润确实倒塌了，必须决定增加净空；剩下的就是选择许可数量，以便：
将块的边界边缘与要清除的最低浮点的底部外边缘平齐
因此，我们别无选择，只能对第三个div施加负间隙，以向上拖动其顶部边界以接触其上方浮动元素的底部外边缘（也称为边界边缘）。因此，如果浮动元素的高度分别为10px，并且第三个div的上边距为200px，则将应用-190px的间隙。最后，这使我们获得了质询者看到的最终结果：
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>
（请注意，如果您使用浏览器的开发工具检查以上代码段中的第三个div，则仍然可以看到div上方的200px的上边距，超出了所有其他内容的范围-仅仅是较大的负间隙将整个边距框向上拉起。）
简单！
