Margin Collapse for Adjacent siblings

Question

I was reading about Margin Collapsing and i came across with this: margin

Adjacent siblings The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).

I dont understand the last phrase "except when the latter sibling needs to be cleared past floats". Can someone give an example?

Thank you

Answer 1

First, the examples below only work in Gecko based browsers like Firefox on Windows or Android. Chrome/Webkit has a long history of implementing clearance incorrectly.

---

I think that statement is a misinterpretation of the specification. What the specification actually says is

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context and no line boxes, no clearance, no padding and no border separate them

So what causes clearance to have an effect here? It's not the clearance of the latter sibling, but the clearance of an intervening element.

Consider this example.

.container {
  overflow:auto;
  border:2px solid;
}
span {
  float:left;
  width:100px;
  height:100px;
  background:red;
  opacity:0.2;
}
.container > div {
  height:60px;
  margin:20px 0;
  background:blue;
}
b {
  display:block;
  clear:left;
}

<p><strong>View this in Firefox</strong></p>
<div class="container">
  <span></span>
  <div></div>
  <b></b>
  <div></div>
</div>

Here we can see that the first div's margin box is as tall as the float. The <b> element does not need to move down to clear the float so it has no clearance. It also has no content, padding, borders or margin, so the first div's bottom margin collapses with the second div's top margin.

However, in this example:

.container {
  overflow:auto;
  border:2px solid;
}
span {
  float:left;
  width:100px;
  height:100px;
  background:red;
  opacity:0.2;
}
.container > div {
  height:59px;
  margin:20px 0;
  background:blue;
}
b {
  display:block;
  clear:left;
}

<p><strong>View this in Firefox</strong></p>
<div class="container">
  <span></span>
  <div></div>
  <b></b>
  <div></div>
</div>

the first div's margin box is 1px short of the height of the float. So the clear of the <b> element moves it down - i.e. it has clearance. Now the bottom margin of the first div and the top margin of the bottom div can't collapse even though the element still has no content, padding, borders or margins and is moved down just 1px.

---

In Chrome, the clear:left on the <b> element causes the margins to not collapse, regardless of whether or not it has clearance, which should it should only have if it needs to be moved down past the float.