두 개의 요소를 서로 옆에 위치 시키려면 float, clear : 두 가지 대안을 모두 사용 하시겠습니까?

Question

나는 다음과 같은 CSS를 사용하여이

<div class="wrapper"> 
    <div class="left"> ... </div> 
    <div class="right"> ... </div> 
</div> 

처럼, 서로 옆에 두 가지 요소를 배치 할

: 내가 어떻게해야합니까 래퍼가이 아이에게 높이의 조정하지만

.left, .right { 
    display:inline; 
    float:left; 
} 

을 요소, clear:both 속성없이?

Answer 1

당신은 overflow 스타일을 사용할 수 있습니다. 부모에 대한 크기를 지정하지 않음으로써이 실제로 오버 플로우 아무것도 아니지만, 그것은 여전히 ​​아이를 포함 할 것입니다 :

이

.wrapper { 
    overflow: hidden; 
} 

사이드 참고 : 떠있는 설정 요소에 display:inline 설정이 무의미 부동 요소가 alwas 블록 요소로, :

이

.left, .right { 
    float:left; 
} 

(. 부동 요소 display:inline를 사용하지만 IE6의 더블 마진 버그에 대응하기 위해 사용되었다, 그래서 그것은 오래된 코드에서 찾을 수 있습니다)

Answer 2

높이가 명시 적으로 지정되어 있지 않으므로 overflow:auto을 설정하면 부모가 자식을 포함하게됩니다. jsFiddle here

.wrapper { 
    overflow:auto; 
} 

....... 전 .....................

AFTER

.left, .right { 
    display:inline; 
    float:left; 
    height:50px; 
    width:50px; 
    background:blue; 
    margin:10px; 
} 
.wrapper { 
    overflow:auto; 
    background:red; 
    width:140px; 
    display:block; 
}