Przepełnienie CSS: ukryte za pomocą pływaków

Question

Przeczytałem numer following code on w3schools i nie rozumiem, w jaki sposób zmieniłaby się właściwość overflow, niezależnie od tego, czy tekst pojawi się na prawo od ul, czy nie.

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>

wiem, że overflow:hidden służy do obsługi treści, która wykracza poza pole, ale nie rozumiem, jak to ma zastosowanie w tym przypadku.

Answer 1

staram się zakończyć zamieszanie:

ul to element blokowy, podobnie jak element p (rozciągają się do 100% szerokości nadrzędnej). Dlatego domyślnie p pojawi się poniżej ul, jeśli żadna szerokość ani wyświetlacz nie jest zadeklarowany dla tych elementów.

Teraz w twoim przykładzie ul zawiera tylko elementy pływające. Powoduje to, że zwinięty na wysokość 0px (nadal ma 100% szerokości, jak widać w przykładzie). Sąsiednie p pojawi się na prawo od pływających li s, ponieważ są one uważane za normalne elementy pływające.

Teraz deklarując overflow (wartość inna niż visible) ustanawia nowy block formatting context, co czyni ul zawiera swoje dzieci. Nagle ponownie "pojawia się" ul, nie mając już rozmiaru 0px. p zostaje przesunięty na sam dół. Można również zadeklarować position:absolute, aby uzyskać ten sam efekt "czyszczenia" (z efektem ubocznym, że teraz ul jest wyjęty z przepływu normalnego elementu - p s zostanie nałożony przez ul.)

See the example fiddle

Jeśli do technicznych rzeczy, porównaj według akapitów specyfikacji CSS:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
i
§10.6.7 'Auto' heights for block formatting context roots. (Dzięki BoltClock za wykopanie linków).

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

Zamiast overflow:hidden; użyj clear:both; dla <p>. tutaj jest w użyciu http://jsfiddle.net/Mvv8w/. Zasadniczo overflow:hidden usunie wszystko, co jest na odwrót, tak jak robi to clear:both;.

Answer 3

Ustawienie elementu powoduje utworzenie nowego kontekstu zmiennoprzecinkowego, dzięki czemu elementy pływające wewnątrz elementu, który został zastosowany, mają wartość overflow: hidden.

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

Answer 4

Dlatego W3Schools nie jest wiarygodnym źródłem Web Designer/programistów. Masz rację, to jest straszny przykład.

To nie dlatego, że w tym przykładzie element nadrzędny nie ma ustalonego z. Co więcej, jest to niezorganizowany znacznik listy, który będzie rozciągał się do rozmiarów jego dzieci niezależnie.

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>