CSS - div의 맑은

Question

있어 문제가 모두 후 큰 격차 ..

HTML

<div id="site-menu">menu1 
    <br>menu2 
    <br>menu3 
    <br>menu4 
    <br>menu5 
    <br>menu6 
    <br> 
</div> 
<div id="site-content"> 
    <div class="site-content"> 
     <div id="site-content-left">left</div> 
     <div id="site-content-right">right</div> 
     <div class="clear"></div> 
    </div> 
</div> 

CSS

.site-content { 
    background:pink; 
} 
#site-content { 
    background:red; 
    margin-left:250px; 
} 
#site-content-left { 
    background:orange; 
    float:left; 
} 
#site-content-right { 
    margin:5px 0 5px 0; 
    background:blue; 
} 
#site-menu { 
    float:left; 
    width: 250px; 
    padding: 20px 0; 
    overflow:hidden; 
    background:grey; 
} 
.clear { 
    clear:both 
} 

격차가 모두 명확 후 있습니다. 그 격차는 메뉴 div 높이 (메뉴 div가있는 것이 있습니다.)로 큽니다. 어떤 해결책을 주시겠습니까? 어떤 문서에 선행 요소 부유 이하

jsFiddle.

Answer 1

clear:both는 요소 강하한다.

#site-content

#site-content{ 
    background:red; 
} 

검사에서 margin: left을 제거이 fiddle

Answer 2

기본적으로 대신 클리어하면 큰 격차를 피할 수있는 두 가지 방법 ..

1)가 있습니다 : 모두 명확한 사용 권리 OR 2) 여백을 사용하는 대신 상위 및 하위 div에 대해 적절한 수레를 정의하십시오. 올바른 div 구조는 위의 간격을주지 않습니다.

아래는 각 div의 스타일입니다.

.site-content{background:pink; width:100%; float:left} 
#site-content{ 
    background:red; 
    margin-left:250px; 
} 
#site-content-left{background:orange;float:left; width:5%; } 
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%} 
#site-menu{ 
    float:left; 
    width: 250px; 
    padding: 20px 0; 
    overflow:hidden; 
    background:grey; 
} 
.clear {clear:both}