Wie funktioniert Floating 2 (oder mehr) divs?

Question

Wenn I #p1float:left zu setzen, wird nur der Inhalt der #p2 umschlingt die schwimmenden #p1 und nicht der div#p2 .Der div#p2 scheint von der linken Kante des Browsers nur dann vorhanden zu sein, wenn .Allerdings (wie in Chrome Developer Tools gesehen) I Stellen Sie sowohl divs zu float:left, der Inhalt als auch der Container wraps umeinander. Warum ist es so?

#p1 { 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#p2 { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    float: left; 
 
}

<title>Floating Divs</title> 
 
<h1>Floating Divs</h1> 
 
<div> 
 
    <div id="p1">DIV</div> 
 
    <div id="p2">DIVDIVDIV</div> 
 
</div>

#p1 { 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#p2 { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    width: 100px; 
 
}

<title>Floating Divs</title> 
 
<h1>Floating Divs</h1> 
 
<div> 
 
    <div id="p1">DIV</div> 
 
    <div id="p2">DIVDIVDIV</div> 
 
</div>

Answer 1

Die precise rules for floats wie in der CSS 2.1-Spezifikation in Punkt sagt beschrieben 2:

Wenn die aktuelle Feld links schwebend, und es irgendwelche links floating durch Elemente erzeugten Schachteln früher in dem Quelldokument, dann jede solche früheren Feld entweder die linke Außenkante des aktuellen Box muss rechts von der rechten äußeren Kante der früheren Box sein, oder seine Spitze muss niedriger sein als der Boden der früheren Box. Analog Regeln gelten für rechts schwebende Boxen.

So #p2, wenn es schwimmt wird #p1 vermeiden. Wenn es nicht schwebt, ignoriert es das Vorhandensein von #p1. Aber dann vermeidet die in #p2 enthaltene Zeilenbox die schwebende #p1, wodurch die Höhe von #p2 so groß wird, dass sie diese Zeilenbox enthalten kann.