我一直在尝试使用 Singularity 创建几个典型的布局示例，并且我对网格跨度和浮点数有疑问。
我创建了一个示例 scss 样式表和 html 布局。这是关于 Sassmeister 的完整示例。
http://sassmeister.com/gist/a7ca98b7520b12bd6241
我的问题是包含内容的 div<div id="content">是否是必要的？我必须将它与 clearfix mixin 一起使用，以便“拉”下 div 并将页脚保持在内容部分下方并放在一边。
有没有另一种方法可以通过 Singularity 实现这种布局，而不必使用周围的 clearfix div？主要部分中是否有不使用浮点数或自行清除此部分的网格跨度选项？
要了解您的问题，您必须了解浮动和清除的工作原理。
当你浮动一个元素时，它会从流中移除。计算容器高度时，它的垂直高度不计算在内。
浮点数的预期用途是将图像添加到长文本中。文字将环绕浮动图像并增加其整体高度并垂直拉伸容器，就像浸入水中的物体增加水面高度一样。
如果浮动图像位于非常靠近文本底部的位置，它会将其底部弹出容器底部，就像一座冰山将其顶部从水中露出一样。
现在假设您的文本由段落组成，并且每个段落都以标题开头。当段落底部有图像浮动时，图像会延伸到下一段，将下一段的标题推到一边。
如果您不希望这种情况发生，请对段落标题应用清除：
h2 { clear: both; }
这基本上告诉标题：不要让浮动图像将您推到一边，而是让它们将您推倒。
但是网页已经不仅仅是格式化的文本，而且 HTML/CSS 没有提供任何格式化布局的方法。所以我们开始使用浮动进行布局。这很丑，就像用墙纸缝衣服一样，但我们没有更好的选择（直到 Flexbox 成为一种东西，而且似乎已经成为一种东西）。
当您将所有内容浮动在容器中时会发生什么？不会留下任何流动，没有文本可以垂直拉伸容器，并且它的高度将为零（加上边框和填充）：
您已经知道，为了使容器恢复其高度（环绕浮动内容），我们必须对容器应用clearfix。但是 clearfix 实际上是什么？
当您将 clearfix 应用于容器时，您:after在 CSS 中使用在容器内创建一个附加元素，毕竟它是内容。然后你对小妈fcuker申请clearing：
.container:after {
content: '';
display: block;
clear: both;
}
现在回到你的问题！使用 clearfix 的替代方法是什么？
你可能已经猜到了。
如果您在浮动元素下方有内容，只需将其应用于浮动clear: both元素下方的下一个元素！就像我们在#4中对段落标题所做的那样。
在你的情况下：
footer { clear: both; }