Css ZURB基金会6使用格列行混合

我有一些奇怪的行为，我想知道我是否使用了

网格列行

我有以下HTML结构：

<div id="homeTop">
  <!-- homeTop content such as headings and other nested rows and columns -->
</div>
<div id="homeMain">
  <div id="homeMain-left"></div>
  <div id="homeMain-right"></div>
</div>
<div id="homeBottom">
  <!-- homeBottom content such as headings and other nested rows and columns -->
</div>

当我在桌面大小的屏幕上查看页面时，有一行css导致

homeBottom

div向右浮动，这会使布局偏离。导致问题的CSS行如下所示：

#homeBottom:last-child:not(:first-child) {
  float: right;
}

由于

列行

是作为行和列的单个元素，换句话说，是一个全宽容器，我不明白为什么我希望它有一个float属性。这行CSS似乎对

列

有意义，但对

列行

没有意义，因为

列行

行为不应该取决于它是否是其父级的

最后一个子级

这是一个bug，还是我使用的

列行不正确？我只是试图避免将
homeBottom
设置为
网格行
，然后在其中包含一个额外的html元素，以充当全宽
网格列
。正如您所看到的，这对于
homeTop
是不必要的，即使它也使用
网格列行
混合。这让我觉得我可能用错了

我想另一种选择是定义我自己的
my grid column row
mixin，其中包括float声明：

@mixin my-grid-column-row {
  @include grid-column-row;
  float: none !important;
}

但这似乎不必要。
这似乎是基金会的问题：


我现在的解决方法是使用以下内容覆盖
网格列行
mixin：

@mixin grid-column-row(
  $gutter: $grid-column-gutter
) {
  @include grid-row;
  @include grid-column($gutter: $gutter);
  float: none !important;
}

刚找到这个：
@mixin grid-column-row(
  $gutter: $grid-column-gutter
) {
  @include grid-row;
  @include grid-column($gutter: $gutter);
  float: none !important;
}