Warum ist Inhalt sichtbar, wenn "Überlauf" auf "Versteckt" gesetzt ist?

Question

Ich versuche, die CSS "overflow" -Eigenschaft besser zu verstehen. Im folgenden Beispiel sehe ich overflow:hidden;, aber der graue Hintergrund ist sichtbar und reicht bis zur vollen 300% der div Breite.

http://jsfiddle.net/emeRJ/3/

Wenn der Überlauf „versteckt“ ist, würde ich erwarten, dass der Hintergrund abgeschnitten werden, nicht sichtbar. Wenn ich es auf "sichtbar" ändere, verschwindet der graue Hintergrund vollständig. Ich bin davon verwirrt und hoffe, ein solides Verständnis davon zu bekommen.

Kann jemand beschreiben, was mit den beiden Optionen passiert? Welches Element "überläuft" eigentlich?

fand ich das obige Beispiel aus einer früheren Frage Properties on CSS overflow

Wenn Sie ein Element, das einen Überlauf zu etwas anderes als „sichtbar“, die Höhe des Elements nach wird erweitern gesetzt hat die float Elemente im Inneren.

Ich sammle in diesem Fall die Breite des Elements erweitert. Es macht jedoch semantisch keinen Sinn. Wenn ein Objekt "sichtbar" ist, erwarte ich, dass es sichtbar und nicht versteckt ist und umgekehrt.

Answer 1

In Ihrem Beispiel gibt es keinen Überlauf und daher ist overflow: hidden nicht viel anderes als das Einrichten eines Blockformatierungskontexts.

ein Blockformatierungskontext herzustellen ist nur ein Nebeneffekt, der der Behälter in so erklärt wickeln die schwimmenden Inhalte macht Floating elements within a div, floats outside of div. Why?

Sie den Ausschnitt sehen würde, wenn der Behälter als der Inhalt schmaler waren. Sie können mit dem folgenden Ausschnitt spielen:

.box { 
 
    width: 200px; 
 
    overflow: hidden; 
 
    background-color: #c3c3c3; 
 
    clear: left; 
 
} 
 
.sub_box { 
 
    float: left; 
 
    width: 400px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 
input { 
 
    float: left; 
 
    clear: left; 
 
} 
 
label { 
 
    float: left; 
 
} 
 
#overflow-visible:checked ~ .box { overflow: visible; } 
 
#overflow-visible-bfc:checked ~ .box { overflow: visible; float: left; } 
 
#overflow-hidden:checked ~ .box { overflow: hidden; } 
 
#overflow-scroll:checked ~ .box { overflow: scroll; } 
 
#overflow-auto:checked ~ .box { overflow: auto; }

<input type="radio" name="overflow" id="overflow-visible" checked /> 
 
<label for="overflow-visible"><code>overflow: visible</code></label> 
 
<input type="radio" name="overflow" id="overflow-visible-bfc" /> 
 
<label for="overflow-visible-bfc"><code>overflow: visible</code> + BFC</label> 
 
<input type="radio" name="overflow" id="overflow-hidden" /> 
 
<label for="overflow-hidden"><code>overflow: hidden</code> (BFC)</label> 
 
<input type="radio" name="overflow" id="overflow-scroll" /> 
 
<label for="overflow-scroll"><code>overflow: scroll</code> (BFC)</label> 
 
<input type="radio" name="overflow" id="overflow-auto" /> 
 
<label for="overflow-auto"><code>overflow: auto</code> (BFC)</label> 
 
<div class="box"> 
 
    <div class="sub_box"></div> 
 
    <div class="sub_box"></div> 
 
</div>