Html 两个分割框[第一个浮动，第二个清除]，第二个空白和#x27；Don’我好像没有先离开_Html_Css

Html 两个分割框[第一个浮动，第二个清除]，第二个空白和#x27；Don’我好像没有先离开

html css

Html 两个分割框[第一个浮动，第二个清除]，第二个空白和#x27；Don’我好像没有先离开,html,css,Html,Css,在下面的代码中，我有两个div框。第一个是float:left，第二个是clear:left，因此它位于第一个下面。我的问题是，为什么利润率最高：20px没有推下第一个div <head> <style> div { width:100px; height:100px; background-color:green; } #box1 { float:left; } #box2 { background-color:red; clear:left; margin-t

在下面的代码中，我有两个div框。第一个是float:left，第二个是clear:left，因此它位于第一个下面。我的问题是，为什么利润率最高：20px没有推下第一个div

<head>
 <style>
 div { width:100px; height:100px; background-color:green; }
 #box1 { float:left; }
 #box2 { background-color:red; clear:left; margin-top:20px; }
 </style>
</head>
<body>
 <div id="box1"></div>
 <div id="box2"></div>
</body>


div{宽度：100px；高度：100px；背景色：绿色；}
#box1{float:left；}
#框2{背景色：红色；清晰：左侧；页边空白顶部：20px；}

是的，这让人困惑。读这本书

具体来说,

如果具有间隙的图元的上、下边距相邻，则其边距将与以下同级图元的相邻边距一起塌陷，但生成的边距不会与父块的下边距塌陷

要获得想要的效果，需要将边距应用于没有间隙的元素，在本例中为第一个div，如下所示：

我不确定你引用的句子与给定的情况有什么关系。正如您所指出的，带有间隙的元素是第二个元素，它恰好是流子元素中的最后一个。它只有一个上边距，而那个边距并没有与任何东西相邻。啊，你说得对。这并不是真正的利润崩溃。这只是浮动的正常行为。就利润率而言，它们实际上并不存在。您可以在inspector工具中看到应用的边距。这里的数学解释是：看起来间隙刚好足以使上边距完全消失，第二个元素与浮动齐平。我对清除算法的工作原理并不完全熟悉，不过……这是盒子模型中真正令人困惑的地方之一。边距会增加元素的尺寸，但不会增加W3C所称的“边界边”：。要清除的是边界边，而不是边距边。第二个元素的边距边与浮点不齐。在上面。请检查员检查一下。利润并没有消失，真的。只是

clear

的链接定义（第二条注释）指定它是要清除的边界边。请接受我的回答或解释。我也不知道为什么，但如果您设置

边距底部：20px#box1

中编码>而不是边距顶部：20px
在#box2
中，您将获得预期结果。也许它能帮你找到原因。当您发现时，请与我们分享。