Funktioniert "clear: both" und "overflow: hidden" auf die gleiche Weise, um einen Container kinderleicht zu wickeln?

Question

Ich habe ein div mit floated Kinder.

Ich weiß, ich kann die Höhe in den folgenden zwei Möglichkeiten, strecken:

.container { 
 
    border: 2px solid #ccc; 
 
    margin-bottom: 250px; 
 
} 
 

 
.container-2::after { 
 
    content: ''; 
 
    display: block; 
 
    height: 0; 
 
    font-size: 0; 
 
    clear: both; 
 
} 
 

 
.container-3 { 
 
    overflow: hidden; 
 
} 
 

 
.item { 
 
    float: left; 
 
    width: 200px; 
 
    height: 50px; 
 
    background: red; 
 
    margin: 10px; 
 
}

<div class="container container-1"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div class="container container-2"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div class="container container-3"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Aber ich denke, dass sie die verschiedenen Prinzipien haben: die clear:both:: nach Element bleibt weg von die Float-Brüder, und zwingt das Elternteil, die Höhe zu dehnen; die overflow:hidden Art macht das div, das BFC hat, und entsprechend standard, BFC wird seine Höhe ausdehnen, um seine sich hin- und herbewegenden Kinder mit einzuschließen.

Die Vor- und Nachteile sind nicht wichtig, aber wie sie funktionieren.

Bin ich richtig, sie sind unterschiedlich, aber haben das gleiche Ergebnis?

Answer 1

Do clear:both und overflow:hidden funktionieren auf die gleiche Weise, um einen Container wickeln Kinder zu wickeln?

Nein. Sie führen verschiedene Funktionen aus.

clear:both

Die clear Eigenschaft steuert, ob ein Element auf oder unter der nächste sein können Elemente schwebte, die vor ihm kommen. Er steuert, ob ein Element die floated-Elemente löschen kann.

clear:both, wenn sie an ein nicht-floatenden Blockelement aufgebracht:

erfordert, dass die obere Randkante des Kastens unterhalb der unteren Außenkante einer Rechts-Floating-und linksSchwebeRahmen sein, das ergab sich aus Elementen früher im Quelldokument.

_{Quelle: https://www.w3.org/TR/CSS2/visuren.html#propdef-clear}

So ist die clear Eigenschaft mehr gilt wahrscheinlich ein Geschwister von Floats. Es hat nichts mit zu tun, das die Höhe von div ausdehnt, die Kinder des Schwimmers hat (wie in deiner Frage angegeben).

overflow:hidden (oder overflow:auto)

Die overflow Eigenschaft, wenn sie mit einem anderen Wert als visible verwendet wird, schafft eine neue block formatting context. Dies führt dazu, dass das Element mit Floats erweitert wird, um seine floated-Kinder zu enthalten.

Zusammenfassend löscht eine Eigenschaft ein Element nach floated Elementen. Der andere dehnt den Behälter aus, um schwimmende Elemente zu umhüllen. Die Ausgabe kann für beide gleich aussehen. Aber jede Eigenschaft ist grundlegend anders.

Weiterführende Literatur:

• 3. Scrollable Overflow: the overflow-x, overflow-y, and overflow properties
• What is a clearfix?
• What methods of ‘clearfix’ can I use?