Ist die Breite erforderlich, um zwei Divs nebeneinander mit Float zu floaten: linke Eigenschaft?

Question

Als ich das erste Mal HTML lernte, wurde mir gesagt, dass wenn Sie 2 divs nebeneinander unter Verwendung float:left floaten wollen, müssen Sie eine Breite für diese beiden Elemente festlegen. Dies liegt daran, dass ein div standardmäßig ein block-Element ist, das die volle Breite einnimmt, die ihm zur Verfügung steht.

Da ich verschiedene Projekte erstellt habe, bin ich auf Fälle gestoßen, in denen das Floaten nicht funktionierte, ohne eine Breite einzustellen, aber in anderen Fällen wird eine Breite nicht benötigt und der Float selbst wird die Elementbreite einschränken .

Zum Beispiel zeigt das folgende fiddle zwei Elemente, die Seite an Seite schweben und nur die float -Eigenschaft verwenden, es wurde keine Breite benötigt.

<style> 
    .left{ 
     background-color:yellow; 
     float:left; 
    } 

    .right{ 
     background-color:green; 
     float:left; 
    } 
</style> 

<div class="left"> 
    Floating left 
</div> 
<div class="right"> 
    Floating left 
</div> 

jedoch in anderen ähnlichen Szenarien, die ich kann jetzt nicht zu reproduzieren scheinen, die Anwendung des float-Eigenschaft auf zwei divs erlaubt es nicht, sie nebeneinander zu schweben, wenn nicht eine Breite ein Satz für beide ist.

Verliere ich meine Gedanken oder gibt es Szenarien, in denen dieses Verhalten variiert?

Answer 1

... ein Blockelement, das die volle Breite aufnehmen kann, die ihm zur Verfügung steht.

Ein nicht ersetzt Blockelement in normalen Fluss wird die volle Breite es ihm zur Verfügung hat aufzunehmen. Diese Anforderung wird angegeben unter http://www.w3.org/TR/CSS2/visudet.html#blockwidth

Ein floated Element ist nicht im normalen Fluss, so dass die Regel nicht gilt. Stattdessen werden die Floatbreiten gemäß ihren eigenen Regeln bestimmt, die unter http://www.w3.org/TR/CSS2/visudet.html#float-width angegeben und beschrieben sind. Dies besagt, dass, wenn ein floated-Element eine berechnete Breite von "auto" hat, seine verwendete Breite unter Verwendung des Shrink-to-Fit-Algorithmus bestimmt wird. Beachten Sie, dass der Shrink-to-Fit-Algorithmus auch für andere Layouttypen verwendet wird, einschließlich nicht ersetzter Inline-Block-Elemente und Tabellenzellen, aber in anderen Aspekten, wie z. B. der vertikalen Ausrichtung, dem Layoutverhalten dieser Elemente ist ganz anders als die der Schwimmer.

Answer 2

Wenn float:leftfloat:right oder an einem Element festgelegt und ist damit die Schaffung eines neuen block formatting context zwingt, und es verhält sich ähnlich wie Inline-Block-Ebene, die Breite und Höhe sind dynamisch (durch den Inhalt bestimmt).