Dlaczego wyczyścić: prawo nie działa zgodnie z przeznaczeniem

Question

Zawsze jestem zdezorientowany przez clear: left, clear: right i clear: both w CSS. Wiem, że clear: both oznacza, że ​​nie pozwala na swobodne poruszanie się po obu stronach.

Zrobiłem kilka testów here. Myślałem, że układ będzie wyglądał jak poniżej, ponieważ B używa clear: both. Ale tak nie jest. Czy ktoś może mi powiedzieć, dlaczego?

B
CD

Updated (postu kod)

<div class="container"> 
    <div class="A">a</div> 
    <div class="B">b</div> 
    <div class="C">c</div> 
    <div class="D">d</div> 
    <div class="CB"></div> 
</div> 

.container{ 
    width:100%; 
    border:1px solid red;  
} 
.B{ 
    float:left; 
    clear:both; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.A,.C,.D{ 
    float:left; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.CB{ 
    clear:both; 
} 

Answer 1

clear na element kasuje tylko pływaków przed nim w kolejności dokumentu. Nie usuwa pustych bitów po. Wartości left i right oznaczają odpowiednio luz lewych pływaków i prawych pływaków poprzedzających element. Nie chodzi o czyszczenie pływaków przed i po żywiole.

Ponieważ C jest pływające, ale nie jest stosowane żadne zezwolenie, pływa obok B. B nie próbuje usunąć C, ponieważ C pojawia się po nim w strukturze dokumentu.

Co więcej, clear: right nie ma żadnego efektu w teście, ponieważ żaden z twoich elementów nie jest przesuwany w prawo.

Answer 2

można mieć wątpliwości, że działa po div jeśli używasz:

.clr:after { 
visibility: hidden; 
display: block; 
content: ""; 
clear: both; 
height: 0; 
}