clearfix mixen overflow : hidden으로 컨테이너를 겹쳐서 표시했습니다.

Question

최근에 SingularityGS 1.4.0으로 업데이트했으며 클래스에 overflow:hidden 속성을 포함하여 내 .container 클래스 문제가 발생했습니다. 슬라이드 성분 용

, I 화살은 .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

는 I 수행해야 제 컨테이너에있는 다른 것들을 사용하고 있습니까?

편집 : - 특이점이 버전의 나침반 clearfix를 사용 Sassmeister issue as requested

Answer 1

을 추가했습니다. 당신이 원하는대로 작동하도록 자신을 작성할 수 있습니다

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

참조 : http://sassmeister.com/gist/099ef72b56365fe8ce07

Answer 2

특이점은 자신의 clearfix 믹스 인을 가지고 있지 않습니다.

컴파스의 clearfix 믹스 인을 사용하고 있습니다.테크닉을 활용하면 컨테이너를 자릅니다.

해결 방법은 clearfixing을 위해 다른 mixin을 사용하는 것입니다.

컴파스 번들 three different clearfix mixins, 가장 많이 사용 가능한 것은 pie-clearfix입니다. 그것은 다음과 같이 출력은 다음과 같습니다

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

난 당신이 팀 말대꾸에 의해 아름다운 toolkit 말대꾸 확장에 번들로 제공된 clearfix 믹스 인을 사용하는 것이 좋습니다.

이있는 pie-clearfix에 비해 다음과 같은 장점 :

1. 모든 현대적인 브라우저에서 작동

   짧은 출력 : 적용

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

2. 두 가지 방법 : 기존의 믹스 인 방법 (기본값) 및 확장 방법. 확장 방법은 중복 제거를 통해 CSS 풋 프린트를 더욱 작게 만듭니다. 확장 방법의 단점은 미디어 쿼리에서 적용 할 수 없다는 것입니다. 미디어 쿼리에만 clearfix가 필요하고 미디어 쿼리 외부에 적용 할 필요가없는 상황에 직면 한 적이 없습니다., false 확장 methhod을 의미

   @include clearfix(true); 
   

   true :

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

   번이 사용하는 현재 설정을 무시하려면 :

   은 당신의 CSS의 시작이 적용 방식을 확장합니다 사용하는 툴킷을 구성하려면 믹스 인 방법을 의미합니다. 당신은 나침반과 툴킷을 모두 포함 있다면 나침반이 clearfix 믹스 인을 대체 한 후, 툴킷이 올 것을
   는

참고.

Toolkit이 프로젝트에 너무 부피가 크다면 Scott suggests처럼 나침반을 가져온 후 clearfix mixin을 정의하기 만하면됩니다. 적절한 clearfix 메서드를 사용하십시오. Scott의 코드 (2014-09-04 12:00 UTC 기준)는 실제로 clearfix되지 않습니다.