通缉：CSS网格系统和折叠页边距

我认为这是一个艰难的过程

我使用一个网格系统，它使用

float:left

。我可以用

display:inline block

重写它，但这不会改变任何事情

假设我们有两列：

如果我在块元素中放置了一个边距为顶部的块元素（如

），那么之前的内容将获得不可折叠的边距。这是正常的，因为浮动元素（或显示：内联块）总是如此

但我希望利润率不断下降。我尝试了很多使其工作，但似乎每一个CSS将把两个元素放在一起，将破坏上面内容的折叠页边距

我知道，我可以使用CSS来获取元素的第一个子元素，以去除页边空白顶部。但在这种情况下，它将不适用，因为内容是用CMS构建的，在我到达元素之前，可能存在任意级别的元素深度

在没有JavaScript的情况下，有没有办法做到这一点

小提琴：

您可以看到，

h1

的页边距顶部和

标题的页边距底部不会折叠。这是通过
.column
的
float:left
实现的


.header{
字体大小：24px；
背景：rgba（0255,0,0.1）；
}
h1{
背景：银；
边缘底部：50px；
字号：28px；
}
.栏目{
浮动：左；
宽度：50%；
背景：rgba（255,0,0,0.1）；
}
氢{
背景：金；
边缘顶部：50px；
字体大小：24px；
}
h1>Headerh1/h1>
h2>列1，浮动：左/h2>
h2>第2列，浮动：左/h2>
我希望页眉和列之间有一个50像素的边距，但这两个边距不会折叠，我最终得到50+=100像素的间距。如果它能起作用，你就不会看到col1和col2上方的浅红色
关于保证金崩溃的文档非常清楚

浮动和绝对定位元素的边距永远不会塌陷


即使使用flexbox也无济于事，行为保持不变

如果您知道哪些元素有边距顶部，也许您可以从类型

selector的第一个

中得到一些信息。。。请参见片段：


.header{
背景：银；
高度：50px；
边缘底部：50px；
字体大小：24px；
}
.栏目{
浮动：左；
宽度：50%；
}
h1{
背景：金；
边缘顶部：50px；
字体大小：24px；
}
.第h1列：类型的第一个{
边际上限：0；
}
标题是普通div
第1列为浮动：左
第2列为浮动：左
我希望页眉和列之间有一个50像素的边距，但这两个边距不会折叠，最终我的间距为50+=100像素。
我认为你做不到。也许最好的方法是根据一些条件确定保证金的目标，并将其删除

如果此问题仅在带有
h1
元素的
.column
紧跟在
.header
之后时发生，则可以构建更多的特定CSS规则。这将覆盖边距并使其无效

.header + .row h1 {
    margin-top: 0;
}

但是，这个答案中有很多if，如果没有更多的信息，就很难解决。
将
.row
元素a
flex
，问题解决了

你为什么要让它浮动


.header{
背景：银；
高度：50px；
边缘底部：50px；
字体大小：24px；
}
.行{
显示器：flex；
}
.栏目{
宽度：50%；
}
h1{
背景：金；
字体大小：24px；
}
firstcol先生{
边际上限：0；
}
标题是普通div
第1列为浮动：左
第2列为浮动：左
我希望页眉和列之间有一个50像素的边距，但这两个边距不会折叠，我最终会有50+=100像素的间距。
根据：

浮动和绝对定位元素的边距永远不会崩溃

如果第一个元素保证需要在任意数量的元素中折叠，那么您最好选择以下CSS：

.header + * :first-child {
  margin-top: 0;
}

如果我正确理解了这个问题，这是你将得到的CSS单独接近

演示：


.header{
背景：银；
高度：50px；
边缘底部：50px；
}
.栏目{
浮动：左；
宽度：50%；
}
h1{
背景：金；
边缘顶部：50px；
}
.header+*：第一个子项{
边际上限：0；
}
标题
第1列
第2列
这是不可能的：O

根据规范（）

坍塌条件：

两者都属于流块内的液位框
参与同一区块
格式化上下文
无线框、无间隙、无填充、无边框
将它们分开（注意某些零高度线
盒子（见9.4.2）
为此目的，将忽略。）
两者都属于垂直相邻的框边，即形成一个框边
以下几对中的一对：

框的上边距及其第一个流入子项的上边距
方框的下页边距及其下一个输入流的上页边距
继兄弟姐妹
最后一个流入子流的下边距及其子流的下边距
如果父项具有“自动”计算高度，则为父项
未建立新边界的框的上下边距
块格式化上下文，且计算的“最小高度”为零、为零或为“自动”
计算的“高度”，以及
不
流动儿童
块容器（例如内联块、表单元格和
表标题）不是方框

在这种情况下，利润率崩溃将违反规则：

浮动利率之间的差额
长方体和任何其他长方体都不会塌陷（即使在浮动和
它在儿童中流动）。
建立新块格式的元素的边距
上下文（例如浮点和具有“溢出”而不是“可见”的元素）
D
<div class="header">Header is normal div</div>
<div class="row">
    <div class="column"><h1>Col 1 is float: left</h1></div>
    <div class="column"><h1>Col 2 is float: left</h1></div>
</div>
<p>I want a 50 pixel margin between Header and the Cols, but the two margins don't collapse and I end up with 50 + = 100 pixel gap.</p>

.header {
  background: silver;
  height: 50px;
  margin-bottom: 50px;
  font-size: 24px;
}
.row {
  margin-top: 50px;
}
.column {
  float: left;
  width: 50%;
}
h1 {
  background: gold;
  font-size: 24px;
}

h1{
margin-top: 0.67em;/* which is around 11px*/
margin-bottom: 0.67em;/* which is around 11px*/
margin-left: 0;
margin-right: 0;
}

.header {
font-size: 24px;
  background: rgba(0,255,0,0.1);
}
h1 {
  background: silver;
  margin-bottom: 50px;
  font-size: 28px;
}
.column {
  float: left;
  width: 50%;
  background: rgba(255,0,0,0.1);
}
h2 {
 background: gold;
  margin-top: 50px;
  font-size: 24px;
}
.row{
  margin-top:7.5%;
}

body{
margin:0;
}
.header {
  font-size: 24px;
  background: rgba(0,255,0,0.1);
}
h1 {
  background: silver;
  font-size: 28px;
  margin:0;
}
.column {
  float: left;
  width: 50%;
  background: rgba(255,0,0,0.1);
}
h2 {
  background: gold;
  font-size: 24px;
  margin:0;
  }
.row{
  margin-top:7.5%;
}

.header + *:last-child {
      h1{
         margin-bottom:0px;
       }
}
 .row + * :first-child{
       h2{
         margin-top:0px;
      }
}

.row .column > *:first-child {
  margin-top: 0;
}