Overflow CSS: nascosto con float

Question

Ho letto il following code on w3schools e non capisco come la proprietà overflow possa influire sul fatto che il testo venga visualizzato a destra dello ul oppure no.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: #dddddd; 
 
    padding: 8px; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

so che overflow:hidden viene utilizzato per gestire il contenuto che va al di fuori della scatola, ma non capisco come si applica in questo caso.

Answer 1

cerco di porre fine alla confusione:

ul è un elemento a livello di blocco così come l'elemento p (si estendono al 100% della larghezza genitore). Questo è il motivo per cui lo p per impostazione predefinita verrà visualizzato sotto lo ul se nessuna larghezza o visualizzazione è dichiarata su tali elementi.

Ora nel tuo esempio lo ul contiene solo elementi flottanti. Questo lo fa collassare fino a un'altezza di 0px (ha comunque il 100% della larghezza, come puoi vedere nell'esempio). L'adiacente p apparirà a destra del float li s perché sono considerati come normali elementi flottanti.

Ora dichiarando overflow (qualsiasi valore diverso da visible) stabilisce un nuovo block formatting context, che rende il ul contiene i suoi figli. All'improvviso ricompare "ul", che non ha più la dimensione 0px. Lo p viene spinto verso il basso. Potresti anche dichiarare position:absolute per ottenere lo stesso effetto "clearing" (con l'effetto collaterale che ora lo ul viene rimosso dal normale flusso di elementi: gli p s saranno sovrapposti dallo ul.)

See the example fiddle

Se siete nel materiale tecnico, confrontare i paragrafi secondo della specifica CSS:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
e
§10.6.7 'Auto' heights for block formatting context roots. (Grazie a BoltClock per scavare i link).

ul{ 
 
    list-style-type:none; 
 
    margin:0; padding:0; 
 
    background-color:#dddddd; 
 
    border:2px solid red; 
 
} 
 
li{ 
 
    float:left; 
 
} 
 
a{ 
 
    display:block; 
 
    width:60px; 
 
    background-color:#555; 
 
    color:white; 
 
} 
 
p{ 
 
    margin:0; 
 
    outline:2px dotted blue; 
 
} 
 
#two{ 
 
    clear:both; 
 
    overflow:hidden; 
 
}

No overflow: 
 
<ul> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> 
 
<br> 
 
With overflow: hidden 
 
<ul id="two"> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

Answer 2

Invece dello overflow:hidden; utilizzare clear:both; per <p>. qui è in uso http://jsfiddle.net/Mvv8w/. Fondamentalmente lo overflow:hidden cancellerà tutto ciò che è a parte proprio come fa clear:both;.

Answer 3

L'impostazione di overflow: hidden su un elemento determina la creazione di un nuovo contesto float, quindi gli elementi posizionati all'interno di un elemento con overflow: hidden applicato vengono cancellati.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 4

Questo è il motivo per W3Schools non è una fonte affidabile per web designer/sviluppatori. Hai ragione, è un terribile esempio.

Non perché, in questo esempio, l'elemento padre non ha un prefisso. Inoltre, è un tag di elenco non ordinato, che si allungherà a prescindere dalle dimensioni dei suoi bambini.

http://jsfiddle.net/EhphH/

CSS

.parent { 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    background: yellow; 
    overflow: hidden; 

} 
.child { 
    float: left; 
    width: 75px; 
    height: 120px; 
    margin: 10px; 
    background: blue; 

} 
.baby { 
    width: 200px; 
    height: 25px; 
    background: green; 
} 

Markup

<div class="parent"> 
    <div class="child"> 
     <div class="baby"> 
     </div> 
    </div> 
    <div class="child"> 
    </div> 
</div>