与clearfix混合溢出div容器溢出︰隐藏

我最近已更新到SingularityGS 1.4.0并遇到问题与我的.container类使用@include clearfix;现在包括overflow:hidden属性。与clearfix混合溢出div容器溢出︰隐藏

对于幻灯片组分，我使用正/负的利润率，以显示箭重叠箭头.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

来源

2014-09-03 Madclouds

请尝试使用http://sassmeister.com/ – Snugug 2014-09-03 17:41:53

[Sassmeister issue as requested]重新创建您的问题（http://sassmeister.com/gist/bc09c9dec57cb4a4421e） – Madclouds 2014-09-03 18:17:09

这奇异的版本使用指南针clearfix。你可以写你自己的工作，因为你想让它：

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

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

来源

2014-09-03 21:52:13 scottkellum

感谢Scott！这帮助我发现了[Compass pie-clearfix mixen]（http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix），它允许定位元素挂在边界之外容器的代价是更加棘手的CSS。“ – Madclouds 2014-09-03 22:32:59

Singularity 1.4实际上[确实附带了一个clearfix mixin]（https://github.com/Team-Sass/Singularity/blob/1.x.x/stylesheets/singularitygs/helpers/_clearfix.scss）。如果你想使用它，在Compass之后导入Singularity。如果你想使用你自己的，请在导入后声明它。 – Snugug 2014-09-04 14:54:07

奇不有自己的clearfix混入。

您正在使用Compass的clearfix mixin，它利用了overflow: hidden技术，这反过来会裁剪您的容器。

解决方法是使用另一个mixin进行清理。

指南针捆绑three different clearfix mixins，其中最可用的是pie-clearfix。它的输出结果如下：

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

我推荐你使用clearfix混入了美丽的toolkit萨斯扩展由Team萨斯捆绑在一起。

它具有对pie-clearfix以下好处：

较短的输出为所有现代浏览器的工作原理：应用的

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

两种方式：传统的混入方式（默认）和延伸方式。通过重复数据删除，扩展方式使您的CSS占用空间更小。扩展方式的缺点是无法将其应用于媒体查询，尽管我从来没有遇到过只需在媒体查询中需要clearfix并且不需要在媒体查询之外应用的情况。

要使用在你的CSS的开始延伸的方式将此配置工具包：
```
@include toolkit-set('clearfix extend', false); 
```
要覆盖当前设置一次使用这样的：
```
@include clearfix(true); 
```
true意味着延长methhod，false意味着mixin方法。

需要注意的是，如果你既包括指南针和工具包，工具包应该来之后指南针覆盖clearfix混入。

如果您觉得Toolkit对于您的项目太笨重，只需在导入Compass后定义您自己的clearfix mixin，就像Scott suggests一样。只要确保使用正确的clearfix方法，Scott的代码（截至2014年9月4日12:00 UTC）实际上并没有clearfix。

来源

2014-09-04 12:48:51

与clearfix混合溢出div容器溢出︰隐藏

回答

相关问题