Singularitygs 利用奇异性进行布局

我一直在尝试使用Singularity创建几个典型的布局示例，我有一个关于网格跨度和浮动的问题

我已经创建了一个示例scss样式表和html布局。下面是关于萨斯米特的完整示例

我的问题是是否需要包含content div

？我不得不将它与clearfix mixin一起使用，以便“拉”div，并将页脚保持在内容部分下方和旁边

---

有没有其他方法可以实现这种奇点布局，而不必使用周围的clearfix div？主节中的网格跨度选项是否不使用浮动或自动清除此节？

要了解您的问题，您必须了解浮动和清除是如何工作的

0 浮动图元时，它将从流中移除。计算容器高度时，其垂直高度不计算在内

1. 浮动的预期用途是将图像添加到一长页文本中。文本将环绕浮动图像，增加其整体高度，并垂直拉伸容器，就像淹没在水中的对象增加水面高度一样

之前：

之后：

2. 如果浮动图像非常靠近文本底部，它将从容器底部弹出底部，就像冰山从水中露出顶部一样

3. 现在，假设您的文本由段落组成，每个段落都以标题开头。当一个图像漂浮在一段的底部时，图像会延伸到下一段，将下一段的标题推到一边

4. 如果您不希望发生这种情况，请对段落标题应用清除：

h2 { clear: both; }

这基本上告诉了标题：不要让浮动的图像把你推到一边，而是让它们把你推到一边

5. 但是网页已经不仅仅是格式化的文本，HTML/CSS没有提供任何格式化布局的方法。所以我们开始在布局中使用浮动。这很难看，就像用墙纸缝衣服一样，但我们没有更好的选择（直到Flexbox成为一种东西，而且似乎已经成为一种东西）

在容器中浮动所有内容时会发生什么？将不会留下任何流，没有文本垂直拉伸容器，其高度将为零（加上边框和填充）：

6. 您已经知道，为了使容器恢复其高度（环绕浮动内容），我们必须对容器应用clearfix。但clearfix实际上是什么

当您将clearfix应用于容器时，您可以在CSS中使用

：after

在容器中创建一个附加元素，毕竟它是内容。然后，你将清算应用到小母牛身上：

.container:after {
  content: '';
  display: block;
  clear: both;
}

7. 现在回到你的问题上来！使用clearfix的替代方案是什么

你可能已经猜到了

如果在浮动元素下面有内容，只需将

clear:both

应用到浮动元素下面的下一个元素！就像我们在段落标题中所做的那样

就你而言：

footer { clear: both; }

---

这里有一个演示：

好的-使用

@包含网格跨度（8,1，$output style:'float'）

或

@包括浮动范围（8,1）

允许我删除包含div和clearfix的内容，尽管有点违反直觉，因为我认为设置一个float可以保证使用clearfix容器。天哪，moly-很遗憾，我只能将投票结果提高一个百分点。：-）非常感谢您抽出时间提供如此详细的答复。我对浮动的总体理解还不算太远，但我对Singulairty还不太熟悉，不完全确定这里发生了什么。奇怪的是，我试图清除页脚的操作无法使用元素选择器

footer{clear:tweet；}

我被迫给页脚一个ID，并将清除应用于ID选择器。我将复制您的SassMester更改并找出不同之处。再次感谢。好的-我已经用你的

页脚{clear:both；}

取回了Sassmeister的全部要点，但它不起作用。如果在页脚上使用ID选择器，则只能清除页脚上方的浮动。有什么不同的想法吗？解决了-出于某种原因，在Sassmeister上，您的

页脚{clear:both；}

呈现在CSS的底部，而在我的CSS上，它出现在奇点网格跨度输出的上方。我只是把它移到了Scss表的底部，效果很好。谢谢很乐意帮忙。别忘了接受答案