singularitygs - 使用奇点布局

Question

我一直在尝试使用 Singularity 创建几个典型的布局示例，但我对 grid-span 和 floats 有疑问。

我已经创建了一个示例 scss 样式表和 html 布局。这是 Sassmeister 上的完整示例。

http://sassmeister.com/gist/a7ca98b7520b12bd6241

我的问题是是否包含内容 div <div id="content">是必要的？我必须将它与 clearfix mixin 一起使用，以便将 div 向下“拉”并将页脚保持在内容部分下方并放在一边。

是否有另一种方法可以使用 Singularity 实现这种布局，而不必使用周围的 clearfix div？主要部分是否有不使用 float 或自行清除此部分的网格跨度选项？

Answer 1

要了解您的问题，您必须了解 float 和清除的工作原理。

0.

当您 float 一个元素时，它会从流 中移除。计算容器高度时不考虑垂直高度。

1.

float 的预期用途是将图像添加到长文本中。文本会环绕 float 图像并增加其整体高度并垂直拉伸(stretch)容器，就像浸入水中的物体会增加水面的高度。

之前:

之后:

2.

如果 float 图像非常靠近文本底部，它会将底部从容器底部弹出，就像冰山露出水面一样。

3.

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

4.

如果您不希望这种情况发生，您可以对段落标题应用清除:

h2 { clear: both; }

这基本上告诉了标题:不要让 float 的图像把你推到一边，而是让它们把你推下去。

5.

但是网页已经不仅仅是格式化的文本，而且 HTML/CSS 没有提供任何格式化布局的方法。所以我们开始使用 float 进行布局。这很丑陋，就像用墙纸缝衣服一样，但我们没有更好的选择(直到 Flexbox 成为现实，而且似乎已经成为现实)。

当您 float 容器中的所有内容时会发生什么？将没有流，没有垂直拉伸(stretch)容器的文本，并且它的高度将为零(加上边框和填充):

6.

您已经知道，为了使容器恢复高度(环绕 float 内容)，我们必须对容器应用 clearfix。但 clearfix 实际上是什么？

当您将 clearfix 应用于容器时，您在 CSS 中使用 :after 在容器内创建一个额外的元素，毕竟它是内容。然后你对小娘们申请清算:

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

7.

现在回到你的问题!使用 clearfix 的替代方法是什么？

你可能已经猜到了。

如果 float 元素下方有内容，只需将 clear: both 应用于 float 元素下方的下一个元素即可!就像我们在 #4 中对段落标题所做的那样。

在你的情况下:

footer { clear: both; }

这是一个演示:http://sassmeister.com/gist/df8af8a3c7f8d3df2796