Jeśli element div ma wartość "clear: right", nic nie powinno unosić się na prawo od niego, czy powinno?

Question

Wydaje mi się, że nie rozumiem, co oznacza słowo kluczowe "jasne".

Mam wiele elementów div, wszystkie z "float: left". Drugi ostatni element div ma również "clear: right". Myślałem, że to spowoduje, że następny element przejdzie do następnej linii. Ale dla mnie tak nie jest.

Oto mój przykład:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="Number">0</div> 
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
    <div class="Duration">00:00:32</div> 
</div>​ 

wygląda następująco:

Próbuję dokonać trwania ("00:00:32"), pojawiają się w następnym wierszu , na prawo od miniatury (niebieski prostokąt).

Wiem, że mógłbym umieścić ostatnie trzy div w innym pojemniku div, ale celem tego pytania jest zrozumienie, dlaczego "clear: right" nie przerywa czasu trwania z unoszenia się po prawej stronie tytułu.

Oto CSS:

div.Section 
{ 
    overflow:auto; 
    background:cornsilk; 
    border:2px solid navy; 
    padding:12px; 
} 

div.Section div.Thumbnail 
{ 
    width:64px; 
    height:42px; 
    background:SteelBlue; 
    foreground:Navy; 
} 

div.Number 
{ 
    width:16px; 
    margin-left:6px; 
} 

div.Duration 
{ 
    margin-left:22px; 
} 

div.Section div 
{ 
    float:left; 
} 

div.Section div.Title 
{ 
    color:DarkGreen; 
    clear:right; 
} 

I, oczywiście, jsfiddle Link: http://jsfiddle.net/8J7V6/3/

Answer 1

Obiekt clear nie zapobiega przed elementy umieszczone w tej przestrzeni po rozjaśniająca elementu. Zapobiega on umieszczeniu elementu tam, gdzie przed nim są już pływające elementy. Dodanie obiektu clear:left do div.Duration spowoduje umieszczenie go poniżej ramki granicznej. Dodanie przed upłynięciem czasu może rozwiązać Twój problem lub, jak już wspomniałeś w swoim pytaniu, możesz użyć innego diva kontenera dla ostatnich trzech div.

Answer 2

Użyłem wyściółkę i margines. Jeśli nie jest możliwe użycie w twoim przypadku, poniższe rozwiązanie nie będzie odpowiednie.

http://jsfiddle.net/8J7V6/5/

Answer 3

Nie ma nic pływających na prawo od niego. Problem, przed którym stoisz, polega na tym, że już wcześniej wysłałeś wszystkie swoje treści, a potem mówisz o czasie, by unieść się w lewo. Ciągle pływa po lewej stronie, po prostu układa się na szczycie zawartości już po po lewej stronie.

Ale tak, usunięcie z prawej strony powoduje, że element ten rozkłada się poza wszystkie elementy, które przed nim płyną w prawo. Wyczyść nie ma wpływu na elementy po nim.

Czy próbowałeś już using a simple <br /> after your title?

Answer 4

.Duration { clear: left; } powinien działać

Answer 5

Odpowiedź ahruss jest poprawna, ale zauważyłem, że nikt nie odpowiedział na twoje pytanie. Zasadniczo clear:left odnosi się do lewych elementów pływających. clear:right odnosi się do właściwych elementów pływających.

Ponieważ twój element pływa w lewo, a nie w prawo, clear:right nie ma na niego wpływu.

Inną rzeczą, którą możesz zrobić, to zawinąć dwa elementy tekstowe w oddzielnym div od niebieskiego pola, unieść ten pojemnik div i niebieski div, a następnie, gdy uniesiesz dwa elementy tekstowe, twój kod clear:left umieści data pod tekstem nadal w twoim pojemniku div, a nie pod niebieskim obrazem po jego lewej stronie.

Jak to:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="TextContainer"> 
     <div class="Number">0</div> 
     <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
     <div class="Duration">00:00:32</div> 
    </div> 
</div> 

i dodać do swojego CSS:

div.TextContainer { 
    float:left; 
} 

Dodaj w jakichkolwiek innych stylów wizualnych trzeba.