尽管有浮动，但重叠 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 列网格上。

我知道我需要清除和浮动。尝试了很多组合。我读过关于浮动和隔离的类似问题 link。还是不明白。请指教

Answer 1

正如您所指出的，您正在寻找的是 Clears。

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

清除似乎很棘手，但我发现大声说出来会有帮助。 clear: left 或 "Clear Left" 是 "Clear everything floated left"。 clear: right 或 "Clear right" 是 "Clear everything floated right"。 clear: both 或 "Clear Both" 是 "Clear everything floated both left and right"。 clear: none 或 "Clear None" 是 "Clear nothing, be it floated left or right"。在这种情况下，"everything" 是 "all sibling elements that come before me".

考虑到这一点，您要做什么就很清楚了#map。 #map 浮动 left，因此您可以将 clear: left 添加到 #info 项目。这将清除 #map 但不会添加您要查找的边距。幸运的是，百分比，即使用于 top/bottom，仍然基于浏览器的 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

尽管有浮动，但重叠 Div

Overlapping Div despite with float

singularitygs