flotteur et la marge

je besoin de savoir pourquoi le code suivant:flotteur et la marge

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      * 
      { 
       margin:0px; 
       padding:0px; 
      } 
      #right 
      { 
       float:right; 
      } 
      #content 
      { 
       margin-top:20px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="right">a</div> 
     <div id="content">b</div> 
    </body> 
</html>

Applique la marge supérieure 20px également au #right div.

Source

2010-09-22 user232028

Il fonctionne très bien lorsque vous:

#content { 
    margin-top: 20px; 
    clear: right; 
}

Source

2010-09-22 14:25:51 petsagouris

Je sais comment y remédier, mais je suis intrested dans la cause de cela. Merci. – user232028

la cause est que vous n'effacez pas l'élément flottant. – Ross

elle n'a pas, strictement. (la marge n'est pas appliquée à #right) flottant prend l'élément hors du flux du document.

ajouter clair: droit à #Content

et éléments flottants ~ ~ devrait avoir une largeur.

Source

2010-09-22 14:26:30 Ross

Merci, je sais que le flottement prend l'élément hors du flux. Pour cette raison, mon élément flottant devrait être en haut à droite, sans marge. – user232028

ah, le pourquoi plutôt que le comment. franchement, je ne pourrais pas vous donner une définition concise, je suis sûr que quelqu'un d'autre peut le faire. l'élément flottant n'a pas de marge. il peut apparaître visuellement, mais c'est parce que l'élément flottant apparaît après l'affichage du contenu non flottant ou jusqu'à ce que le flottant soit effacé. C'est ma compréhension au moins. vous voyez la marge de #content, et après #content, #right est sorti, faute d'un meilleur mot. – Ross

le pourquoi est plus sur la façon dont le bloc contre le bloc en ligne contre en ligne fonctionne. – jcolebrand

Deux choses manquent: 1) clear: right; dans #content. 2) les largeurs doivent être spécifiées afin que vous puissiez appliquer clear: right sans l'empilement de div.

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      * 
      { 
       margin:0px; 
       padding:0px; 
      } 
      #right 
      { 
       float:right; 
       width:24%; 
       border:1px solid red; 
      } 
      #content 
      { 
       margin-top:20px; 
       width:74%; 
       clear: right; 
       border:1px solid aboue; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="right">a</div> 
     <div id="content">b</div> 
     <div style="clear:both;"></div> 
    </body> 
</html>

J'ai ajouté les bordures pour faciliter l'affichage.

Source

2010-09-22 14:40:39

Merci beaucoup. Je devrais savoir pourquoi, dans ma version, les éléments flottants ont le margin-top, assigné à #content. – user232028

Je suppose que je ne suis pas parce que votre ajoute spécifiquement une marge supérieure: 20px à #content –

~ le margin-top n'est pas appliqué à l'élément '# right'. Il veut savoir pourquoi l'élément '# right' a une marge supérieure. La raison en est à cause de 'block' vs' inline-block' vs 'inline' – jcolebrand

flotteur et la marge

Répondre

Questions connexes