与奇点重叠的块元素

Question

我正在做我的第一个奇异网格系统项目，到目前为止我很喜欢它。然而，我在一个部分有一个奇怪的问题，我有一个<h2>和<h3>元素重叠…真不知道出了什么问题。

我正在开发的项目可以在:http://senseslabv3.brunomonteiro.mixture.io/

第一个<section>与class=intro。

有人知道是怎么回事吗?感谢您的宝贵时间。

Answer 1

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

注意，清除浮动和清除固定是由lolmaus提出的，实际上做的是不同的事情。清除浮动将清除项目的边距，而清除固定一个项目将确保它的所有浮动子元素都被正确包含。

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

查看grid-span中关于输出样式、输出跨度、浮动跨度和上下文覆盖的文档，以更深入地了解Singularity中可用的不同输出样式和选项。

Answer 2

Clear both需要声明在grid-span mixin .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

这是一个老问题，但我刚刚遇到了这个问题。snugg的答案是完美的，但我想展示的是为我工作的代码。(不能在注释中放入代码)

//主内容容器

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

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

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