尽管有浮动，但仍重叠 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