当 'body{padding:0;}' 时，'float' 和 'clear' 表现得很奇怪。为什么？答案

【问题标题】：'float' and 'clear' are acting weird when 'body{padding:0;}' . Why?当 'body{padding:0;}' 时，'float' 和 'clear' 表现得很奇怪。为什么？
【发布时间】：2012-03-15 17:52:28
【问题描述】：

首先是html标记，

<p>Bananas For BreakFast</p>

<h1>What the what!?</h1>

...还有css，

body, p, h1, h2, h3, h4{
  margin: 0; padding: 0;
}

body{
  padding: 30px;
}


/*remove the comment to trigger the effect

body{
  padding: 0;
}

*/


p{
  float: left;
  background-color: red; /*just to aid visualization*/
}

h1{
  clear: both;     
  margin-top: 200px;
  background-color: grey; /*just to aid visualization*/
}

您可以在下面的 tinkerbin 页面上看到它的实际效果。

http://tinkerbin.com/FJcLuxBr

那么，我的问题是什么？

简单：当 body 元素上有填充时，清除元素上的 margin-top 应用。当'填充：0;'同一个清除元素上的 'margin-top' 停止工作。

为什么？

被清除的元素不参与其上方元素的边距折叠，因此这不能是边距顶部与正文的边距折叠。即使是这样，也应该在 body 元素上应用边距，将整个元素向下推——但事实并非如此。

【问题讨论】：

那么你想做什么？仅对 body 应用 padding 并将 margin-top 仅应用于 h1 元素？
没有。这只是我遇到的一些奇怪的行为，并且想知道对此的解释。我不是想实现布局 - 我只是想了解行为。
body { float: left } ha - 不确定可能对所有内容产生的其他负面影响，但似乎可以解决问题。
在这里，我以为我是世界上唯一一个使用“What the what！？”这个表达方式的人。 :)
我很想知道两件事：1）为什么这个问题至少被否决了两次？ 2）@Aaron Brewer：为什么你认为浮动元素不是块元素？那么它们是什么？

标签： css css-float margins

【解决方案1】：

被清除的元素不参与其上方元素的边距折叠，因此这不能是边距顶部与正文的边距折叠。

为什么不呢？见http://www.w3.org/TR/CSS2/box.html#collapsing-margins。我在那里找不到任何排除清除元素的东西。请注意，该元素不得通过另一个已清除的元素或任何边框/填充将其与其父元素分开。

即使是这样，也应该在 body 元素上应用边距，将整个元素向下推 - 事实并非如此。

没有。再次，请参阅规格：

如果元素的边距与其父元素的上边距折叠在一起，则框的上边框边缘被定义为与父元素的相同。

【讨论】：

我想通了。我所说的“已清除元素不参与边距崩溃（..）”的意思是指实际上引入“清除”的元素-请参阅规范或等待我的回答（我有时间会发布它） .但是，是的，我想我解释得不好。
...但让我快速澄清一下“清除”的事情。它可能会给你一个关于答案的提示。如果带有“clear: both, left or right”的“元素”已经在它之前的浮动元素的底部边缘之下，那么它不会按照规范的规定引入“间隙”——在这种情况下，边距适用，边距折叠也是如此。否则，当引入间隙时，margin-top 不适用，折叠也不适用。无论如何，只要我有一点时间，我会以上面的案例为例给出一个适当的，结构良好的答案。
@JOPLOmacedo：我认为你已经掌握了它。我不必再写答案了:)

【解决方案2】：

在两者之间添加一个clear div 使其工作..

http://tinkerbin.com/Ayc4qk3R

【讨论】：