Question

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

对于幻灯片组件，我使用负/正边距来显示与.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以外的东西吗？

修改 - 添加了Sassmeister issue as requested

Answer 1

此版本的Singularity使用Compass clearfix。您可以根据需要编写自己的工作：

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

请参阅：http://sassmeister.com/gist/099ef72b56365fe8ce07

Answer 2

Singularity没有自己的clearfix mixin。

您正在使用Compass中的clearfix mixin，它利用了overflow: hidden技术，从而为您的容器进行裁剪。

解决方案是使用另一个mixin进行清除修复。

指南针捆绑three different clearfix混合，其中最有用的是pie-clearfix。它的输出如下：

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

我建议您使用由Team Sass捆绑的漂亮toolkit Sass扩展程序捆绑的clearfix mixin。

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

适用于所有现代浏览器的缩短输出：

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

两种应用方式：传统的mixin方式（默认）和扩展方式。扩展方式通过重复数据删除使您的CSS占用空间更小。扩展方式的缺点是无法从媒体查询中应用它，尽管我从未面临过只需要在媒体查询中需要clearfix并且不需要在媒体查询之外应用它的情况。 / p>
要使用扩展方式配置Toolkit，请在CSS的开头应用它：
```
@include toolkit-set('clearfix extend', false);
```
要使用此设置，请覆盖当前设置：
```
@include clearfix(true);
```
true表示扩展方法，false表示mixin方法。

请注意，如果您同时包含Compass和Toolkit，则Toolkit应该在Compass之后覆盖clearfix mixin。

如果您觉得Toolkit对于您的项目来说过于庞大，那么只需在导入Compass之后定义您自己的clearfix mixin，就像Scott suggests一样。请务必使用正确的clearfix方法，Scott的代码（截至2014-09-04 12:00 UTC）并不是真正的clearfix。

重叠div通过容器与clearfix mixen溢出：隐藏

2 个答案: