Élément flottant DIV et P

Question

Lors de l'utilisation de l'attribut float, deux éléments div sont adjacents l'un à l'autre, mais pas deux éléments de paragraphe; plutôt l'élément 'p' vomit un résultat bizarre.

Aussi, il est étrange que lorsque je fais flotter deux éléments 'div' et deux éléments 'p', le résultat soit mieux aligné.

Mes 3 exemples de code peuvent être en mesure d'expliquer (s'il vous plaît noter:. Le lien vers mon 3ème code est dans mon commentaire ci-dessous, je n'ai pas assez de points de réputation pour mettre 3 liens):

Code 1: https://jsfiddle.net/dipeshsukhani/v7r45zeg/

#superhero { 
 
    background-color: yellow; 
 
    float: left; 
 
} 
 

 
#supervillain { 
 
    background-color: pink; 
 
}

<p id="superhero"> 
 
    SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
    SUPERVILLAIN 
 
</p>

code 2: https://jsfiddle.net/dipeshsukhani/51mtncx8/

#hero { 
 
    background-color: lightcoral; 
 
    float: left; 
 
} 
 

 
#villain { 
 
    background-color: lightcyan; 
 
}

<div id="hero"> 
 
    HERO 
 
</div> 
 
<div id="villain"> 
 
    VILLAIN 
 
</div>

Code 3:

#hero { 
 
\t \t background-color: lightcoral; 
 
\t \t float: left; 
 
\t } 
 

 
\t #villain { 
 
\t \t background-color: lightcyan; 
 
\t } 
 
    
 
    #superhero { 
 
\t \t background-color: yellow; 
 
\t \t float: left; 
 
\t } 
 

 
\t #supervillain { 
 
\t \t background-color: pink; 
 
\t } 
 

<div id="hero"> 
 
\t HERO 
 
</div> 
 
<div id="villain"> 
 
\t VILLAIN 
 
</div> 
 
<p id="superhero"> 
 
\t SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
\t SUPERVILLAIN 
 
</p>

Pourquoi ces différents résultats pour div seulement, p seulement et «div et p dans un seul code?

Answer 1

Vos deux exemples fonctionnent de manière similaire en termes de flottement. Ce qui vous rend confus et vous fait penser que la version p ne fonctionne pas, c'est que p a des marges supérieures/inférieures par défaut (-webkit-margin-before: 1em; dans Webkit pour le haut) appliquées par le navigateur. Ces marges donnent l'impression que le premier paragraphe (flottant) n'est pas flottant, bien qu'il le soit.

Il est facile à tester en réinitialisant marge 0:

#superhero { 
 
    background-color: yellow; 
 
    float: left; 
 
    margin: 0; 
 
} 
 

 
#supervillain { 
 
    background-color: pink; 
 
}

<p id="superhero"> 
 
    SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
    SUPERVILLAIN 
 
</p>