使用奇点的布局

Question

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

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

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

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

Answer 1

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

0.

浮动元素时,它将从流中移除.计算容器的高度时,它的垂直高度不计算在内.

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

在此输入图像描述

在此输入图像描述

如果漂浮的图像非常靠近文本的底部,它将从容器的底部弹出它的底部,就像一个冰山从水中露出它的顶部.

在此输入图像描述

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

在此输入图像描述

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

h2 { clear: both; }

这基本上讲述了标题:不要让漂浮的图像将你推到一边,让他们把你推倒.

在此输入图像描述

但是网页不仅仅是格式化文本,HTML/CSS也没有提供任何格式化布局的方法.所以我们开始使用浮动布局.这很难看,就像用壁纸缝制你的衣服一样,但我们没有更好的选择(直到Flexbox成为一种东西,似乎已经存在).

将所有内容浮动到容器中会发生什么？没有流动,没有文本可以垂直拉伸容器,它的高度将为零(加上边框和填充):

在此输入图像描述

您已经知道,为了使容器重新获得高度(环绕浮动的内容),我们必须对容器应用clearfix.但究竟什么是clearfix呢？

当您将clearfix应用于容器时,您可以:after在CSS中使用它在容器中创建一个额外的元素,在它的所有内容之后.然后你清理小母亲fcuker:

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

在此输入图像描述

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

你可能已经猜到了.

如果你有浮动元素下面的内容,只需应用clear: both浮动元素下面的下一个元素!就像我们在#4中为段落标题所做的那样.

在你的情况下:

footer { clear: both; }