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

  1. 12

    La clear propriété n'empêche pas les éléments de placée dans un espace après le effacé élément. Il empêche l'élément d'être placé là où il y a déjà des éléments flottait à la direction avant. L'ajout d'un clear:left à div.Duration ferait-il être placé au-dessous de la marine de la zone. L'ajout d'un <br/> avant la durée est susceptible de résoudre votre problème, ou, comme vous l'avez déjà dit dans votre question, vous pouvez utiliser un autre div conteneur pour les trois dernières divs.

    Vous sir êtes le premier qui explique d'ailleurs la logique de la valeur dans un comphrehensible moyen 🙂 vous avez effacé un mystère pour moi, heh

    OriginalL'auteur ahruss

  2. 5

    ahruss la réponse est correcte, mais j'ai aussi remarqué que personne n'a vraiment répondu à votre question. Fondamentalement clear:left se réfère à gauche les éléments flottants. clear:right se réfère à droite les éléments flottants.

    Depuis votre élément flottant à gauche, pas droit, clear:right de ne pas l'affecter.

    L'autre chose que vous pourriez faire est d'envelopper les deux éléments de texte dans un div distinctes à partir de la boîte bleue, un flotteur qui div conteneur et le bleu de la div, puis quand vous flotter les deux éléments de texte, votre clear:left code va mettre la date dans le texte toujours à l'intérieur de votre conteneur div et non pas sous le bleu sur l'image à gauche.

    Comme ceci: 

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

    et ajouter ceci dans votre css: 

    div.TextContainer {
   float:left;
}

    Ajouter à toutes les autres styles visuels dont vous avez besoin.

    OriginalL'auteur chazthetic

  3. 1

    Il n'y a pas quelque chose de flottant à la droite de celui-ci. Le Problème auquel vous êtes confronté, c'est que vous avez déjà envoyé la totalité de votre contenu avant le temps, et puis vous dites le temps de flotter à gauche. C'est toujours flottant à gauche, c'est juste empiler sur le dessus du contenu déjà là à gauche.

    Mais oui, la compensation de la droite fait que l'élément de briser passé tous les éléments qui sont flottaient vers la droite avant de. Claire n'a pas d'incidence sur les éléments d'après elle.

    Avez-vous essayé à l'aide d'un simple <br /> après votre titre?

    Si tout flottait, il pourrait probablement faire plus de sens de celui-ci, mais comme vous le dites avec une seule chose flottant il y a juste un élément de la peine avec le flux de la page. Vous flotteur ou vous n'avez pas, ou c'est un gâchis de l'omi.

    OriginalL'auteur animuson

  4. 1

    J'ai utilisé rembourrage et de la marge. Si il n'est pas possible de l'utiliser dans votre cas, alors la solution suivante ne sera pas approprié.

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

    C'est un peu un hacky façon de le faire, mais il fonctionne. Cependant, vous n'avez pas vraiment expliqué pourquoi le clear: right ne pas de travail.
    Peut-être, depuis le div est à gauche, il devrait donc clair:gauche. Je ne suis pas sûr. Si je me trompe, corrigez-moi. Je suis toujours en apprentissage.
    vérifier ahruss réponse ci-dessous. Ils expliquent comment effacer les œuvres.
    Merci.

    OriginalL'auteur sarwar026

  5. 0

    .Duration { clear: left; } devrait fonctionner

    Qui rend briser tous les au-dessous de la boîte bleue.

    OriginalL'auteur Matijs