使用奇异性，我发现在具有宽容器的浮动中存在一些不一致性

Question

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

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

<header>
    header
</header>
<main>
    main content
</main>
<aside>
    aside
</aside>
<footer>footer, nav, social icons etc</footer>

因此，在一个12列的网格中，页眉是全宽的，main是9列宽，side是3列宽，footer是全12列。

无论如何，不一致的地方是：页眉、旁白和页脚都有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');    
}
}

正确添加选项，似乎可以解决我的问题。是不是有什么原因让我忽略了为什么麦蒂飘左了？

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

Answer 1

您似乎不熟悉clear属性的作用或工作方式。当使用Isolation输出方法时，您需要清除自己的浮点，这是基于传统浮点输出方法的网格系统/框架可能没有接触过的。阅读它们的好地方是MDN的Clear部分。

在您提供的示例中，页眉横跨整个网格宽度。因为网格中的最后一个项目是向右浮动的，所以标题也是向右浮动的。这是为了隐藏一行中最后一项的任何百分比舍入问题，并将它们全部排列到右边缘。否则，所有网格项都将向左浮动。因为这个项目是向右浮动的，所以为了清除它的边界边缘（而不是重叠），我们需要告诉DOM中的下一个项目（您的main元素）清除向右浮动的项目。这将把它推到header之下，创建一个新行。因为footer是全宽的，因此向右浮动，而您的aside也是向右浮动的，所以main/aside行上只有足够的空间容纳宽度为100%-width(aside)的项目。因为footer对于剩余区域来说太宽，所以它会下降到下一行，而无需清除其浮点值。也就是说，这仅仅不会与main重叠，因为main和aside具有相同的高度；如果main比aside高，footer会与之重叠。为了防止这种情况，你应该告诉footer清除向左浮动的东西，main就是

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

如果在完成所有这些之后，您仍然对Isolation输出方法感到不舒服，则可以切换到Float输出方法。两人有着截然不同的心理模式；隔离是指将元素相对于彼此离散地定位，而浮动更类似于在网格上穿过一行。请记住，如果你切换到Float，那么你需要使用推拉混合来推动网格周围的事物。

希望这能有所帮助！