隔离模式 - 清除和创建新行

Question

好的 - 我读过John Albin Wilkins http://palantir.net/blog/responsive-design-s-dirty-little-secret - 我现在明白了'隔离'模式的动机（以及它是如何实现的）。

然后我读了Sam对隔离模式的初步反驳，虽然他更新了他的帖子，说他正在接受这个想法（或者至少他理解它的动机） - http://snugug.com/musings/on-responsive-designs-dirty-little-secret

如果我已经正确理解了所有这一点，Singularity提供的Zen网格增强功能之一是它允许您混合输出样式（例如，您可以使用@import切换到布局中间的浮点输出布局mixin）。

然而，在隔离模式下 - 我仍然不清楚你如何“清除一排” - 正如John Albin Wilkins在他的帖子中提到的那样......

  

虽然使用此技术的浮动物品无法再看到彼此的右边缘，但在清除时它们仍然可以看到它们的底边。这意味着您可以通过简单地清除以前的网格项来启动一排新的网格项，这个新行将位于所有以前的内容之下。

假设我有一个部分，其中有6篇文章 - 我希望所有文章都占据该部分中两列网格的1列。

grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)

也许我对行清除感到有点困惑，虽然我承认这一点在浮动输出中“自然地”发生，并且Sam在他的帖子中锁定了它，并且没有任何帖子描述'你怎么样'你在不使用clearfix容器的情况下清除隔离模式中的行，我的好奇心被激发了。

Answer 1

要清除行，请在该行的第一项上使用clear: both。

请注意，奇点隔离范围mixin适用clear: right，因此您必须在span mixin之后应用clear: both：

.foo
  +grid-span(1, 1)

.bar
  +grid-span(1, 2)

.baz
  +grid-span(1, 1)
  clear: both

.quux
  +grid-span(1, 2)

有关清除的更多背景信息，请阅读以下答案：Layout using Singularity