Css '；浮动'；和'；清除'；当'；正文{padding:0；}'。为什么？

首先，html标记

<p>Bananas For BreakFast</p>

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

你可以在下面的tinkerbin页面上看到它的运行

那么，我有什么问题

简单：虽然body元素上有填充，但已清除元素上的边距顶部适用。当“填充：0；”时同一已清除元素上的“边距顶部”停止工作

为什么?

---

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

在中间添加一个

clear

div使其工作

清除的图元不参与其上方图元的边距折叠，因此这不能是边距顶部与主体边距一起折叠

为什么不呢？看见我在那里找不到任何可以排除已清除元素的东西。请注意，该元素不得被另一个清除的元素或任何边框/填充物与其父元素分开

即使它是，那么边距应该应用在身体元素上，推动整个东西向下-事实并非如此

否。同样，请参见规格：

如果元素的边距与其父元素的上边距折叠，则长方体的上边距将定义为与父元素的上边距相同

---

那你想做什么？将填充单独应用于主体，并将边距顶部仅应用于h1元素？不。这只是我遇到的一些奇怪行为，我想知道它的解释。我不是在试图实现一个布局——我只是在试图理解它的行为。body{float:left}ha——不确定这可能会对一切产生什么其他负面影响，但它似乎纠正了这个问题。在这里，我认为我是世界上唯一一个使用“what the what！？”这个表达的人：）我很想知道两件事：1）为什么这个问题至少被否决了两次？2） @Aaron Brewer:为什么你认为浮动元素不是块元素？那它们是什么？我已经弄明白了。我所说的“已清除的元素不参与边距折叠（……）”是指实际引入“清除”的元素——请参阅规范或等待我的回答（有时间我会发布）。但是是的，我想我解释得很糟糕。。。。但让我很快澄清一下“通关”这件事。它可能会给你一个关于答案的提示。如果带有“clear:both，left或right”的“element”已经位于其前面浮动图元的底边下方，则它不会引入规范规定的“clear”——在这种情况下，边距适用，边距折叠也适用。否则，当引入间隙时，边距顶部不适用，塌陷也不适用。无论如何，只要我有一点时间，我会以上面的案例为例，给出一个恰当、结构合理的答案。@JOPLOmacedo:我想你已经基本掌握了。我不必再写答案了：）

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*/
}