절대 div의 부동 div가 상위를 확장하지 않습니다. Clearfix가 작동하지 않는 것 같습니다.

Question

나는이 문제가 있습니다 : 절대 위치에있는 부모 div 안에 두 개의 부동 div가 있습니다.

CSS :

.wrapper { 
    position: absolute; 
    left: 0; 
    top: 0; 
    overflow: hidden; /* doesn't do anything! */ 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.clear { 
    clear: both; 
} 

HTML :

파이어 폭스에서

<div class="wrapper"> 
    <div class="left">some text here</div> 
    <div class="right">some text here too</div> 
    <div class="clear"></div> 
</div> 

, 래퍼는 의도 한대로 모든 것이 작동 position:absolute이없는 경우. 절대적으로 만들면 래퍼가 축소되고 부동 내용은 divs 나머지 문서와 겹칩니다. 또한 래퍼의 너비를 100 %로 설정하면 세로 스크롤 막대가 겹칩니다.

무엇이 누락 되었습니까? 이 추가

Answer 1

봅니다 :

.wrapper{ 
    display: inline-block; 
} 

Answer 2

당신이 overflow: hidden clearfix을 사용하고 있기 때문에, div.clear 완전히 불필요합니다. 그러나 당신이 또한 래퍼를 배치하고 있기 때문에 절대적 overflow: hidden clearfix는 또한 불필요한 position: absolute 같은 것 또한 clearfix (적어도 크롬과 FF에서)입니다.

http://jsfiddle.net/j6jkk/

Answer 3

는 요소 부동 문서 흐름 밖으로 걸린다. 즉, 부모의 크기에 영향을 미치지 않으며, 절대 배치 된 요소는 기본적으로 0 x 0입니다. 떠 다니는 요소의 다음 형제를 지우는 것은 실제로 그 요소에 내용이 있거나 너비가 스타일로 설정되어 있거나 문서 흐름에있는 다른 형제 중 하나가 너비보다 큰 경우에만 상위 컨테이너의 너비를 확장합니다 부모의 초기 폭. 래퍼의 오프셋 부모 문서가 width: 100% 문제에 대해서는

float - MDN

인 경우 :이 아니라 파이어 폭스 일반적으로 CSS의 사실이지만

, 모질라 개발자 네트워크에서이 문서를 참조하십시오 , 이것은 Firefox가 포지셔닝 스타일에 어떻게 반응 하는지를 나타냅니다. 절대 위치 요소를 으로 설정된 위치의 빈 div에 배치하여이를 완화 할 수 있습니다.