Floating DIV und P-Element

Question

Bei der Verwendung von Float-Attribut gehen zwei div-Elemente nebeneinander, aber zwei Absatzelemente nicht; eher das "p" -Element verursacht ein komisches Ergebnis.

Auch ist es seltsam, dass wenn ich zwei 'div' Elemente und zwei 'p' Elemente float, das Ergebnis besser ausgerichtet ist.

My 3 Codebeispiele zu erklären, können in der Lage sein (bitte beachten:. Der Link zu meinem dritten Code in meinem Kommentar unten ist, ich habe nicht genug Rufpunkte 3 Links setzen):

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>

Warum so unterschiedliche Ergebnisse für div nur, S. nur und 'div und p in einem einzigen Code'?

Answer 1

Beide Beispiele funktionieren ähnlich wie Floating. Was Sie verwirrt und Sie denken lassen, dass Version nicht funktioniert, ist, dass Standardrand oben/unten (-webkit-margin-before: 1em; in Webkit für top) Stile von Browser angewendet hat. Diese Ränder lassen den ersten (schwebenden) Absatz so aussehen, als wäre er nicht schwebend, obwohl er es ist.

Es ist leicht zu Test von Rand zu 0 Zurücksetzen:

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

 
#supervillain { 
 
    background-color: pink; 
 
}

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