오버플로를 사용하지 않고 div를 오버플로하는 div를 피하는 방법은 무엇입니까?

Question

제 디자인에서 래퍼 div을 사용하고 있습니다. 내 문제는 래퍼 내부의 요소가 내 div 외부에 떠 있었고 플로트 클리어링 섹션에 설명 된 문제가 css-tricks.com에 있습니다.

나는 이것을 overflow:hidden을 추가하여 해결했으며 모든 것이 잘 동작합니다. 하나의 문제가 있습니다. 내 헤더 래퍼 안에 더 이상 볼 수없는 드롭 다운 메뉴가 있습니다.

내 드롭 다운 메뉴는 내 settings 컨테이너 안에 있습니다.

settings을 position: absolute; z-index: 800;으로 설정하려고 시도했지만 도움이되지 않았습니다.

래퍼 문제를 해결하고 래퍼 외부에서 특정 항목을 계속 표시하려면 어떻게해야합니까? http://jsfiddle.net/sXVbT/3/

업데이트
난 그냥 부트 스트랩 CSS를 훔쳐했다 그들이 display:table을 사용하고 있습니다 :

그녀는 내 바이올린입니다. 이것은 overflow:hidden처럼 잘 작동합니다. display:table을 사용하는 캐비티가 있습니까? 그렇지 않다면 다른 모든 솔루션 대신이 솔루션을 사용하지 않은 이유는 무엇입니까?

또한

.wrapper:before, .wrapper:after { 
    content: ""; 
    display: table; 
    line-height: 0; 
} 
.wrapper:after { 
    clear: both; 
} 
.wrapper:before, .wrapper:after { 
    content: ""; 
    display: table; 
    line-height: 0; 
} 

내가이 필요하십니까 추가 CSS가? 내 피들에 어떤 이점도 보이지 않는다. http://jsfiddle.net/sXVbT/5/.

Answer 1

table대신 display: block으로 잘 작동하며 .wrapper:after입니다.

사람들은 일반적으로 display: table과 그 동질 집단을 CSS로 피하는 경향이 있습니다. 왜냐하면 (예기치 않게) 오래된 "레이아웃이있는 테이블"지옥의 오명을 짊어지기 때문입니다. 나는 "바람직하지 않다"고 말하지만, 나는 그것을 사용하는 경우가 거의 없다는 것을 인정해야한다. display: table-cell에는 여러 가지 부작용이 있지만, display: table을 사용하면 충분하지 않습니다.

그러나 부모 요소의 display: table은 (수레를 지우는 관점에서) 많이하지 않는다고 확신합니다. - 크롬은 :after 부분을 jsFiddle에서 제거 할 때이를 확인하는 것으로 보입니다.

그것은 실제로 (당신이 두 개의 동일한 CSS 규칙이 필요하지 않지만) 작업을 수행하는 .wrapper:after의

:

.wrapper:before,  /* You can leave this out. It prevents top 
         margin-collapse, and isn't part of the clear 
         solution itself */ 
.wrapper:after 
{ 
    content: "";  /* Adds content, so you don't have to. 
         An Opera bug means you may need a space: " " */ 
    display: table; /* May be 'block', but if you use 
         :before, it must be 'table' */ 
    line-height: 0; /* Not sure why it would be needed */ 
} 

.wrapper:after { 
    clear: both;  /* Does the actual clearing for you */ 
} 

그래서 짧은 버전은 다음과 같습니다

.wrapper:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

을 상단 여백하지 않는 한 자식 요소 붕괴.

.wrapper:before, .wrapper:after { 
    content: ""; 
    display: table; 
    line-height: 0; 
} 

.wrapper:after { 
    clear: both; 
} 

이 명확하게하기 위해, 무엇을 : (나는 아직도 선 높이에 대한 필요성이 표시되지 않습니다 있지만) 그 경우, 부트 스트랩 버전을 사용하는 부분은 않습니다하기 전에이 솔루션 작업을을 정확히overflow: hidden과 같이 (넘쳐 흐르는 콘텐츠가 잘 보이지 않게되는 원치 않는 부분은 제외). overflow: hidden에는 떠 다니지 않은 포함 된 요소가 위쪽 및 아래쪽 여백을 유지할 수 있다는 이점이있었습니다. 일부 다른 솔루션은 이러한 여백을 줄였습니다. 컨테이너와 비 플로트 자식 사이에 공간이 필요한 경우 컨테이너 대신 패딩을 사용해야했습니다.

:before 트릭을 사용하면 포함 된 비 플로트 요소의 위쪽 여백을 유지할 수 있습니다. :after 부분은 실제로 플로트를 지우는 것 외에도 아래쪽 여백을 처리합니다.