使用奇点的布局

Question

我一直在尝试使用Singularity创建几个典型的布局示例，我对网格跨度和浮点数有疑问。

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

http://sassmeister.com/gist/a7ca98b7520b12bd6241

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

是否有另一种方法可以使用Singularity实现此布局，而无需使用周围的clearfix div？在主要部分中是否有一个grid-span选项，它将不使用浮点数，或者自我清除此部分？

Answer 1

要了解您的问题，您必须了解浮动和清理工作的方式。

0

浮动元素时，它将从流中删除。计算容器的高度时，它的垂直高度不计算。

1

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

之前：

后：

2

如果漂浮的图像非常靠近文本的底部，它会将其从容器底部弹出，就像冰山一样从水中露出顶部。

3

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

4

如果您不希望这种情况发生，请将清算应用于段落标题：

h2 { clear: both; }

这基本上可以告诉标题：不要让漂浮的图像将你推到一边，让他们把你推倒。

5

但网页不仅仅是格式化文本，HTML / CSS也没有提供任何格式化布局的方法。所以我们开始使用浮动布局。这很丑陋，就像用壁纸缝制你的衣服一样，但我们没有更好的选择（直到Flexbox成为一件事，似乎已经存在）。

将所有内容浮动到容器中会发生什么？将不会有 flow ，没有文本可以垂直拉伸容器，并且它的高度将为零（加上边框和填充）：

6

您已经知道，为了让容器重新获得高度（环绕浮动内容），我们必须将 clearfix 应用于容器。但究竟什么是明确的修复？

当您对容器应用clearfix时，您可以在CSS中使用:after在容器中创建一个额外的元素，包括其内容。然后你将清理应用于小母亲fcuker：

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

7

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

你可能已经猜到了。

如果您的内容低于浮动元素，只需将clear: both应用于浮动元素下方的下一个元素即可！就像我们在＃4 中为段落标题所做的那样。

在你的情况下：

footer { clear: both; }

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