与 clearfix mixen 溢出重叠 div 过去的容器:隐藏

Question

我最近更新到 SingularityGS 1.4.0，并且使用现在包含overflow:hidden属性的@include clearfix;的.container类遇到了问题。

对于幻灯片组件，我使用负/正边距来显示箭头重叠.container：

.container {  //Container for the grid system 
    background: $background-color;        
    max-width: $site-width;
    margin: 0 auto;
    position: relative;
    @include clearfix;
    @include breakpoint($large-break) {
        border-left: 20px solid #fff;
        border-right: 20px solid #fff; 
        width: $site-width; 
    }
    .container {
        border: 0px;
        margin: 0px;
        clear: both;
    }
}

    .left-arrow, .right-arrow {
        position: absolute;
        cursor: pointer;
        margin-top: -20px;
        font-size: 0.8em;
        width: 41px;
        height: 41px;
        top: 50%;
    }
    .left-arrow {
        left: -10px;
        background: url(/images/icons.png) no-repeat -153px -146px;
    }
    .right-arrow {
        right: -10px;
        background: url(/images/icons.png) no-repeat -197px -146px;
    }

下面是问题的屏幕截图：

https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0

我应该在我的容器中使用 clearfix mixin 以外的其他东西吗？

编辑： - 根据要求添加了萨斯迈斯特问题

Answer 1

这个版本的奇点使用Compass clearfix。您可以编写自己的代码以根据需要工作：

@mixin clearfix {
    &:after {
        content: '';
        display: table;
    }
}

参见：http://sassmeister.com/gist/099ef72b56365fe8ce07

Answer 2

Singularity没有自己的clearfix mixin。

您正在使用Compass的clearfix混合，它利用了overflow: hidden技术，从而裁剪了您的容器。

解决方案是使用另一种混合蛋白进行清除。

Compass捆绑了三种不同的clearfix mixin，其中最有用的是pie-clearfix。它的输出如下：

.foo {
  *zoom: 1;
}
.foo:after {
  content: "";
  display: table;
  clear: both;
}

我建议您使用与Team Sass的漂亮工具包Sass扩展捆绑在一起的clearfix mixin。

与pie-clearfix相比，它具有以下优点：

1. 适用于所有现代浏览器的较短输出：

   .foo:after {
     content: "";
     display: table;
     clear: both;
   }
   

2. 两种应用方式：传统的混合方式(默认(和扩展方式。扩展方式通过重复数据删除使您的 CSS 占用空间更小。扩展方式的缺点是无法从媒体查询中应用它，尽管我从未遇到过仅在媒体查询中需要 clearfix 并且不需要在媒体查询之外应用它的情况。

   要配置 Toolkit 以使用扩展方式，请在 CSS 的开头应用以下命令：

   @include toolkit-set('clearfix extend', false);
   

   要覆盖当前设置一次，请使用以下命令：

   @include clearfix(true);
   

   true表示扩展甲基，false表示混合方法。

请注意，如果您同时包含指南针和工具包，则工具包应位于指南针之后以覆盖clearfix混合。

如果你觉得 Toolkit 对于你的项目来说太笨重了，只需在导入 Compass 后定义你自己的 clearfix mixin，就像 Scott 建议的那样。只要确保使用正确的clearfix方法，Scott 的代码(截至 2014-09-04 12：00 UTC(实际上并没有 clearfix。