Si un div a “clear:right”, rien ne doit flotter à la droite de celui-ci, devrait-il?

Me semble avoir été confus quant à ce que le css "clair" mot clé.

J'ai un certain nombre d'éléments div, avec "float:left". L'avant-dernier élément div a aussi "clear:right". Je pensais que serait la cause de l'élément d'aller à la ligne suivante. Mais pour moi, ça ne marche pas.

Voici mon exemple:

<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>

Ressemble à ceci:

Si un div a “clear:right”, rien ne doit flotter à la droite de celui-ci, devrait-il?

Je suis en train de faire la durée ("00:00:32"), apparaissent sur la ligne suivante, à droite de la vignette (le rectangle bleu).

Je sais que je pourrais mettre la dernière de trois divs dans un autre div conteneur, mais le but de cette question est de comprendre pourquoi "clear:right" ne s'arrête pas la durée de partir à la dérive sur la droite du titre.

Voici le 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;
}

Et, bien sûr, le jsfiddle lien: http://jsfiddle.net/8J7V6/3/

OriginalL'auteur Andrew Shepherd | 2012-04-11

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *