为什么顶部边距不可见？

Question

以下是给定的HTML代码，

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

第一种情况 - 以下是应用的css代码，未设置margin，

.row {
   background: red; 
}

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

.blue {
  background: blue;
}

，输出为：

第二种情况 - 设置margin后，下面是css代码，

.row {
   background: red; 
}

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

.blue {
  background: blue;
}

输出，

第三种情况 - 以下是css代码，overflow设为hidden

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

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

.blue {
  background: blue;
}

输出，

1）

在上述第二种情况下，为什么具有2个div元素的容器不会在上边缘展开？

2）

在上述第三种情况下，为什么具有2个div元素的容器在上边缘扩展？

Answer 1

通过在包含元素上放置overflow:hidden，您正在更改它Block Formatting Context。只有少数几种风格。

我通常使用这种方法自我清除模块。