singularitygs - 使用奇异性，我发现带有宽容器的 float 存在一些不一致

Question

我第一次尝试奇点，我正在尝试重新创建我拥有的网格。简单的一个。

这是一个简单的结构，用于测试:

<header>
    header
</header>

<main>
    main content
</main>

<aside>
    aside
</aside>

<footer>footer, nav, social icons etc</footer>

所以在一个 12 列的网格中，页眉是全宽，主要是 9 列宽度，旁边是 3 列宽度，页脚是全 12 列。

不管怎样，不一致是这样的:header、side、footer都有float:right，但是main是float:left，所以脱离了文档的流程。

这是网格:

/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;

这是剩下的:

html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
@include background-grid;   
}
/* main layout */
header {
@include grid-span(3, 1);
background: red;
@include breakpoint(1024px) {
    @include grid-span(12, 1);  
}
}
main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2);   
}
}

所以问题是，它不尊重流并且与标题重叠，就像这样 http://imageupload.maxmendez.net/images/incon.png .绿色主要，应该在标题下方。

为了解决这个问题，我不得不这样做:

main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2, $options: 'right');    
}
}

正确添加选项，似乎在右边清晰并解决了我的问题。我是否有理由忽略为什么 mai 向左漂浮？

还没有在 IE 中测试，但我担心兼容性。

Answer 1

似乎您对 clear 不熟悉属性(property)或它是如何工作的。使用隔离输出方法时，您需要清除自己的浮点数，这可能是您使用基于网格系统/框架的更传统的浮点数输出方法所没有接触到的。阅读它们的好地方是 MDN's Clear section .

在您提供的示例中，标题跨越整个网格宽度。因为网格中的最后一项向右 float ，所以标题同样向右 float 。这是为了隐藏一行中最后一项的任何百分比舍入问题，并将它们全部对齐到右边缘。否则，所有网格项都向左 float 。因为这个项目向右 float ，为了清除它的边框边缘(不要重叠)，我们需要告诉 DOM 中的下一个项目(你的 main 元素)清除向右 float 的项目。这会将其推至下方 header ，创建一个新行。因为 footer是全宽，因此向右 float ，而您的 aside也是飘到右边了，main上只有足够的空间/aside宽度项的行 100%-width(aside) .因为 footer对于剩余区域来说太宽了，它会下降到下一行而无需清除其 float 。话虽如此，这只会与 main 不重叠。因为 main和 aside高度相同；如果 main变得比aside更高, footer会重叠。为了防止这种情况，你应该告诉 footer清除东西向左飘，其中main是。

虽然这一切听起来相当复杂，但不要担心跨浏览器的兼容性。我们已经在包括 IE 在内的所有浏览器中广泛测试了 Singularity，并且它运行良好。

如果在这一切之后您仍然对隔离输出方法感到不舒服，您可以 switch to the Float output method .两者有非常不同的心智模型。隔离是关于将元素彼此相关地离散定位，而 Float 更类似于在网格上穿过一行。请记住，如果您切换到 Float，则需要使用 push和 pull混合来插入网格周围的东西。

希望这有帮助!