增加浮动元素的保证金

Question

我有一个.container，其中有n个（left-block和right-block）div。
left-block向左浮动，right-block向右浮动。 但是我在第一left-block和right-block以及第二left-block和right-block之后没有获得保证金 这是一个演示：JSBin

Answer 1

将margin-top添加到.left-block以及.right-block

Demo

.left-block {
  float:left;
  border:solid #CCC 1px;
  width:350px;
  height:125px;
  background:transparent;
  clear: right;
  margin-top: 10px;
  //position:relative;
}

.right-block {
  float:right;
  border:solid #CCC 1px;
  width:350px;
  height:125px;
  background:transparent;
  clear:right;
  //position:relative;
  margin-top: 10px;
}

P.S删除<br />标签，不需要它们。

---

以上内容也会将10px margin添加到顶部框中，为了摆脱它，请使用下面的选择器。

.container > div:nth-of-type(1) {
  margin-top: 0;
}

.container > div:nth-of-type(2) {
  margin-top: 0;
}

Answer 2

<强> http://jsbin.com/ayiziNa/7/

您必须小心浮动元素，因为它们会成为inline元素 - 您可能希望首先将它们定义为inline-block，这样它们就能够保持边距而不会导致其他问题

以下是我申请的代码：

.container > div {
  display: inline-block;
  margin-top: 20px;
}