What is causing the top margin to be hidden from view?

Question

Here is the following HTML code snippet provided:

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

Case One - The CSS code applied, without specifying margin,

.row {
   background: red; 
}

.column {
  #margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

resulting in:

https://i.sstatic.net/UUZhT.png

Case Two - The CSS code after setting the margin,

.row {
   background: red; 
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

yielding the output,

Case Three - The CSS code with overflow set as hidden

.row {
  background: red; 
  overflow: hidden;
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

with the resulting output being,

1)

In Case Two, why doesn't the container with 2 div elements expand on top margin?

2)

In Case Three, why does the container with 2 div elements expand on top margin?

Answer 1

Implementing an overflow:hidden on the parent element can alter its Block Formatting Context. This change is achieved by only a select few styles.

I commonly employ this technique to clear modules automatically.

Answer 2

Implementing an overflow:hidden on the parent element can alter its Block Formatting Context. This change is achieved by only a select few styles.

I commonly employ this technique to clear modules automatically.