我认为这是一个艰难的过程。
我使用网格系统，利用float:left. 我可以用 重写它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/
您可以看到，margin-top ofh1和 margin-bottom of.header不会塌陷。这是通过float:left..column
.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;
}<div class="header"><h1><h1>Headerh1</h1></h1></div>
<div class="row">
<div class="column"><h2><h2>Col 1, float: left</h2></h2></div>
<div class="column"><h2><h2>Col 2, float: left</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;}. 但这不是我想要的。我想要的是一种彼此相邻的设置元素的方式，它与包含的元素的边距折叠一起使用。
编辑2
因此，情况和问题再次简而言之。
问题比较简单。我有一些 CSS 代码，它允许我设置两个或多个相邻的 div，例如 float:left; 宽度：50%。在这些 div 内部是像 h2 这样具有上边距的元素。如果在 div 之前有一个带底边距的 h1。这种情况不允许 h1 和 h2 的边距崩溃。是否有机会通过边距折叠将元素彼此相邻放置，而无需手动将边距设置为零？
否则。在不创建新的块格式化上下文的情况下，是否有可能将设置元素彼此相邻？
编辑3：
-------------------------------------------------------------
What it is:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆
┆ margin-bottom of h1
┆
┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┼┄┄┄
┆
┆ margin-top of h2
┌─ .row ────────────────────┐ ┆ not collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┄┄┄┴┄┄┄
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------
What I want:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆ margin-bottom of h1
┆ and margin-top of h2
┌─ .row ────────────────────┐ ┆ collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┆
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │ ┄┄┄┴┄┄┄
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------