Question

首先，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'不再起作用。

为什么？

已清算的元素不会参与其上方元素的保证金折叠，因此这不会是保证金顶部与机构保证金的崩溃。即使它是，但是应该在身体元素上应用边距，将整个事物推下去 - 这不是个案。

Answer 1

已清算的元素不会参与其上方元素的保证金折叠，因此这不会是保证金顶部与机构保证金的崩溃。

为什么不呢？见http://www.w3.org/TR/CSS2/box.html#collapsing-margins。我找不到任何可以解除清除元素的东西。请注意，元素不能与其父元素通过另一个已清除的元素分隔，也不能与任何边框/填充区分开。

即使它是，但是应该在身体元素上应用边缘，将整个事物推下去 - 而事实并非如此。

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

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

Answer 2

在中间添加clear div使其有效..

http://tinkerbin.com/Ayc4qk3R

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

2 个答案: