플로팅 div는 clear를 사용하여 부모 클래스를 잃습니다. 둘 다;

Question

두 행에 테두리를 넣으 려하는데 약간의 문제가 있습니다. 현재는 첫 번째 행만 수행합니다.

나는 clear : both; div의 새로운 행을 위해 그것의 국경과 부모 divs 스타일을 빼앗는 것 같다.

<style type="text/css"> 
.box { 
    border: 1px solid #E5E5E5; 
    border-radius: 4px 4px 4px 4px; 
    width: 90%; 
} 
</style> 

<div class="box"> 
    <div style="float:left; width:150px;"> 
     Row 1, Column 1 
    </div> 
    <div style="float:left; width:150px;"> 
     Row 1, Column 2 
    </div> 

    <div style="clear:both;"></div> 

    <div style="float:left; width:150px;"> 
     Row 2, Column 1 
    </div> 
    <div style="float:left; width:150px;"> 
     Row 2, Column 2 
    </div> 
</div> 

주셔서 감사합니다 두 번째 행 후 청산 사업부를 추가

Answer 1

동일한 HTML 구조를 유지하려면 마지막 div 다음에 clear:both 컨테이너를 추가하기 만하면됩니다. http://jsfiddle.net/7cptj/

Answer 2

보십시오. 그렇게하면 문제가 해결됩니다.

이유는 요소를 플로팅 할 때 상위 요소에서 다소 벗어나기 때문입니다. clear: both은 floated div에 상대적으로 빈 요소를 배치하여 float div가 일반적으로 차지하는 "space"를 유지합니다.