2011-01-05 3 views
0

아무도 나에게 왜이 세 가지 코드 조각이 정확하게 동일하게 표시되는지 설명 할 수 있습니까? IE6?IE6에서 HTML이 떠 다니는 명확한 문제

<div id="wrap"> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
    <div></div> 
    <div></div> 
</div> 

2 :

<div id="wrap"> 
    <div></div> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
    <div></div> 
</div> 

3

<div id="wrap"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
</div> 

1 (4 자식 DIV 번째 '라인'다른 하나 '해제'상태에서 시작한다는 것을 의미)

CSS :

#wrap { 
    position:relative; 
    width:1000px; 
    height:400px; 
    padding:0px; 
    margin:0px; 
    border:solid 1px black; 
} 

#wrap div { 
    float:left; 
    width:150px; 
    height:100px; 
    background-color:blue; 
    padding:0px; 
    margin:0px; 
    border:solid 1px black; 
} 

.clear { 
    clear:left; 
} 
나는 당신의 사업부에 대해 실행

+1

이 시각적으로 DIFF에 훨씬 쉽게 될 것입니다. – Phrogz

답변

0

1을 사용하고 깔끔 HTML의 남용 (온라인 버전이) :

<style type="text/css"> 
/*<![CDATA[*/ 
    div.c3 {position:relative;width:1000px;height:400px;padding:0px;margin:0px;border:solid 1px black;} 
    div.c2 {clear:left;float:left;width:150px;height:100px;background-color:blue;padding:0px;margin:0px;border:solid 1px black;} 
    div.c1 {float:left;width:150px;height:100px;background-color:blue;padding:0px;margin:0px;border:solid 1px black;} 
    /*]]>*/ 
    </style> 

그리고 코드 ...

<div class="c3"> 
    <div class="c1"></div><!-- below is cleared --> 

    <div class="c2"></div> 

    <div class="c1"></div> 

    <div class="c1"></div> 
    </div> 

많은 청소기. 이 사이트는 버그 IE6 구현에 대한 질문에 대한 답변 수 : 당신은 하나 개 또는 두 개의 CSS 클래스를 사용한다면

http://css-class.com/articles/explorer/floats/floatandcleartest1.htm

관련 문제