尽管有浮动，重叠的Div

Question

我正在尝试这样做。

这个sass。

#map {
    @include grid-span(8,1);
}

#form {
    @include grid-span(4,9);
}

#info {
    @include grid-span(8,1);
}

问题是#form和#map div重叠。

这是12列网格。

我知道我需要清除和浮动。试过很多组合。我已经阅读了有关浮动和隔离的类似问题链接。仍然没有得到它。请指教。

Answer 1

正如你所说，你正在寻找的是Clears。

在float，isolation和calc输出样式的Singularity中，附加到网格的所有项目都会浮动left，除非范围在最后一列结束连续，在这种情况下它浮动right。这意味着，根据您的示例，#map和#info向左浮动，#form向右浮动。

清除看似棘手，但我发现只是大声说出来有帮助。 clear: left或“清除左”是“清除所有浮动的东西”。 clear: right或“清楚右边”是“清除所有浮动的权利”。 clear: both或“清除两者”是“清除所有左右浮动的东西”。 clear: none或“清除无”是“一无所有，无论是向左还是向右浮动”。在这种情况下，“一切”都是“摆在我面前的所有兄弟元素”。

考虑到这一点，您要做的就是明确#map。 #map已浮动left，因此您需要将clear: left添加到#info项目中。这将清除#map，但不会添加您正在寻找的边距。幸运的是，即使用于顶部/底部，百分比仍然基于浏览器的width，因此如果您想要在#info和#main之间使用相同的装订线和#form，您需要做的就是将margin-top: gutter-span();添加到#info。

最后，这是你最终得到的代码：

#map {
  @include grid-span(8,1);
}

#form {
  @include grid-span(4,9);
}

#info {
  @include grid-span(8,1);
  clear: left;
  margin-top: gutter-span();
}

这是SassMesiter的一个分支，showing it in action