我使用浮动的网格系统：左。我可以用display：inline-block重写它，但是这不会改变一个东西。

假设我们有两列：

<div class="row"> 
    <div class="column">
        <!-- some content here -->
    </div>
    <div class="column">
        <!-- some content here -->
    </div>
</div>

如果我在其中放置了带有margin-top的块元素(例如< h1>)，我将获得不折叠的边距。这是正常的，因为它总是与浮动元素(或显示：内联块)一样。

但是我想要收缩的利润。我尝试了很多工作，但似乎每个CSS将两个元素相邻，将会破坏上述内容的折叠边距。

我知道，我可以使用CSS来获取元素的第一个孩子来摆脱边缘顶部。但是在这种情况下，它将不适用，因为内容是使用CMS构建的，并且在到达元素之前可能会有任意级别的元素深度。

有没有JavaScript的方法？

小提琴：http://jsfiddle.net/HerrSerker/ZSV3D/

你可以看到，h1的margin-top和.header的margin-bottom不会崩溃。这是通过float：.column的左边。

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

<div class="header"><h1>&lt;h1>Headerh1&lt;/h1></h1></div>
<div class="row">
    <div class="column"><h2>&lt;h2>Col 1,float: left&lt;/h2></h2></div>
    <div class="column"><h2>&lt;h2>Col 2,float: left&lt;/h2></h2></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. If it would work,you wouldn't see the light red above col1 and col2</p>

编辑

我可以在CSS中使用一些后继操作符，如header .row .column h1 {margin-top：0;}。但这不是我想要的。我想要的是一种设置元素的方式，它们与包含元素的边缘崩溃一起使用。

EDIT2

所以情况和问题再一次简单。
问题很简单。我有一些CSS代码，它允许我设置两个或更多的div彼此相邻，如float：left;宽度：50％。在这些div之内是像h2这样的元素，它们有一个顶点。如果在一个div之前有一个h1与底边。这种情况不允许h1和h2的边缘崩溃。是否有机会将元素放在彼此之间，边缘崩溃，而不是手动将边距设置为零？

否则。在创建新的块格式上下文之前，是否有任何设置元素相邻的机会？

EDIT3：

-------------------------------------------------------------      
What it is:

.header    +---------------------+
.header    | +-----------------+ |
.header    | | h1              | |
.header    | +-----------------+ |  ----+---
.header    +---------------------+      |
                                        | margin-bottom of h1
                                        | 
           -----------------------------+---
                                        |
                                        | margin-top  of h2
.row       +---------------------+      | not collapsing
.row       | +-------+ +-------+ |  ----+---
.row       | | h2    | | h2    | |
.row       | | in    | | in    | |
.row       | | col 1 | | col 1 | |
.row       | +-------+ +-------+ |
.row       +---------------------+

-------------------------------------------------------------      
What I want:

.header    +---------------------+
.header    | +-----------------+ |
.header    | | h1              | |
.header    | +-----------------+ |  ----+---
.header    +---------------------+      | margin-bottom of h1
                                        | and margin-top  of h2
.row       +---------------------+      | collapsing
.row       | +-------+ +-------+ |  ----+---
.row       | | h2    | | h2    | |
.row       | | in    | | in    | |
.row       | | col 1 | | col 1 | |
.row       | +-------+ +-------+ |
.row       +---------------------+

-------------------------------------------------------------