singularitygs - 与奇异性重叠的块元素

Question

我正在用奇异网格系统做我的第一个项目，到目前为止我很喜欢它。但是，我在一个<h2>和<h3>元素重叠的部分遇到了一个奇怪的问题......真的很难弄清楚问题出在哪里。

我的开发项目可在以下网址获得： http: //senseslabv3.brunomonteiro.mixture.io/

首先<section>与class=intro.

有没有人知道它正在发生的事情？谢谢你的时间。

Answer 1

正如其他人所说，您需要清除浮动。默认情况下，Singularity 的输出样式是“隔离”，这需要了解如何清除浮点数 ( clear: left, clear: right, clear: both, clear: none)。奇点假设没有清除 ( clear: none)，这意味着如果未正确清除网格项可能会重叠。这样做是为了遵循最常见的隔离输出方法的心理模型，特别是将块放置在网格上的离散点上。清除浮动会将它们清除到项目的边缘边缘，最明显的是通过创建新行。请参阅关于 Clear 的 Mozilla 开发人员网络文章。

请注意，按照 lolmaus 的建议清除浮动和清除固定实际上会做不同的事情。清除浮动会将项目清除到边缘边缘，而清除项目将确保正确包含其所有浮动子项。

Float 输出遵循不同的心智模型，即穿过网格的一行，因此会自动为您清除浮动。如果您希望使用 Float 输出样式作为默认样式，只需$output: 'float'在调用网格之前将其添加到 Sass 文件中。这将改变您的全局输出样式上下文。或者，您可以使用float-span浮点输出风格的思维模型并按需输出，而不是作为选项grid-span传递给.$output-style: 'float'grid-span

查看Output Styles、Output Span、Float Span和Context Overridesgrid-span的文档，以更深入地了解 Singularity 中可用的不同输出样式和选项。

Answer 2

清除两者都需要在您的网格跨度混合下方的某处声明.tag h3 {clear: both;}

Answer 3

而不是丑陋的<div style="clear: both;"></div>考虑这个：

.intro h2 {
  @include pie-clearfix; }

或者，如果您使用toolkit：

.intro h2 {
  @extend %clearfix-micro; }

如果您分享您的 SASS 代码，我们可能会更好地解决您的问题。

Answer 4

这是一个老问题，但我刚刚遇到了这个问题。Snugug 的答案很完美，但我想展示对我有用的代码。（无法将代码放在评论中）

//主要内容容器

.l-main {  
  @include breakpoint(80em) {
    @include grid-span(16, 3, 20);  
  }  
}

// 内容容器内的全宽横幅。我需要清除它，因为横幅上方和下方还有其他几个较小的列/网格。

.b-banner {
  @include breakpoint(80em) {
    @include float-span(16, 1, last);
  }  
}