La larghezza è necessaria per flottare due div affiancati usando float: left property?

Question

Quando ho appreso per la prima volta l'HTML, mi è stato detto che se si desidera fluttuare 2 div affiancate usando float:left, è necessario impostare una larghezza su questi due elementi. Questo perché un div, di default, è un elemento di blocco, che occuperà tutta la larghezza che ha a disposizione.

Come ho costruito vari progetti, ho trovato casi in cui floating non ha funzionato senza impostare una larghezza, ma in altri casi, sembra che non sia necessaria una larghezza e il float stesso limiterà la larghezza degli elementi .

Ad esempio, il seguente fiddle mostra due elementi che galleggiano affiancati utilizzando solo la proprietà float, non era richiesta alcuna larghezza.

<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> 

Tuttavia, in altri scenari simili che non riesco a riprodurre questo momento, applicando la struttura galleggiante a due divs non permette loro di galleggiare affiancati meno larghezza è un set per entrambi.

Sto perdendo la testa o ci sono degli scenari per i quali questo comportamento varia?

Answer 1

... un elemento di blocco che occupa l'intera larghezza disponibile per .

Un elemento non sostituito blocco nel flusso normale assumerà la larghezza ha a sua disposizione. Questo requisito è indicato al http://www.w3.org/TR/CSS2/visudet.html#blockwidth

Un elemento flottato non è nel flusso normale, pertanto la regola non si applica. Invece, le larghezze di galleggiamento sono determinate in base alle proprie regole, dichiarate e descritte allo http://www.w3.org/TR/CSS2/visudet.html#float-width. Questo dice che quando un elemento flottato ha una larghezza calcolata di "auto", la sua larghezza usata viene determinata usando l'algoritmo shrink-to-fit.

noti che l'algoritmo shrink-to-fit viene utilizzata anche per altri tipi di configurazione, inclusi gli elementi non sostituito inline-block e celle di tabelle, ma in altri aspetti, come l'allineamento verticale, il comportamento modello di tali elementi è molto diverso da quello dei galleggianti.

Answer 2

Quando impostato float:left o float:right su un elemento, esso impone la creazione di un nuovo block formatting context, e si comporta in modo simile a livello di blocco in linea, la larghezza e l'altezza sono dinamiche (determinato dal tenore).