clear : 둘 다 작동하지 않습니다. css float

Question

내 플로트가 지워지지 않아서 아이 컨테이너가 부모 컨테이너 안에 머무를 이유가 확실하지 않습니다.

내 말은 this jsfiddle을 확인하십시오. .shadow-wrapper div가 그 뒤에 오는 다른 모든 요소를 ​​포함하도록합니다. 부모 컨테이너가 자식 요소를 포함하도록하려면 어떻게해야합니까?

Answer 1

사용이 : 당신이 사용할 수있는 부유 요소를 둘러싸

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    overflow:hidden; 
} 

있는 다음 사용

float:left; 
overflow:hidden; 
display:table; 
display:inline-block; 
display:table-cell; 

다른 해결 방법 : 방법 후 :

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

이 코드에서 알 수 있듯이 두 요소를 모두 플로팅 된 마지막 요소 다음에 적용해야 할 필요가 없으므로이를 시뮬레이션하는 after 메서드를 사용할 수 있습니다.

http://jsfiddle.net/7wja6/

Answer 2

하나의 옵션은 float:left;을 .shadow-wrapper에 추가하는 것입니다.

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    float: left; 
} 

http://jsfiddle.net/kMGQC/1/

Answer 3

수레를 사용하는 일반적인 규칙과 클리어는 하나 개의 항목을 떠 경우, 당신은 아마 너무 그 형제를 모두 부동해야한다는 것입니다. 문제가있는 것으로 보이는 경우 마지막 자식으로 추가 div를 추가하고 문제를 해결해야하는 해당 div를 모두 삭제할 수 있습니다.

<div class="wrapper"> 
    <div class="floating-thing">Hellllllooooo</div> 
    <div class="non-floating-thing">Weeeeeeee</div> 
    <div class="clearfix"></div> 
</div>