Überlauf: versteckte/float Eigenschaft

Question

Ich kann wirklich nicht verstehen, warum der Überlauf: versteckt den Float-Eigenschaftseffekt gelöscht werden soll.

Hier sind die Quellen, unter denen ich harte Zeit habe.

<div class="float-frame"> 
    <div class="float-unit">A</div> 
    <div class="float-unit">B</div> 
    <div class="float-unit">C</div> 
    <div class="float-unit">D</div> 
</div> <!--html5 sources--!> 

.float-frame { 
    background: #eee; 
    border: 1px solid #ddd; 
    padding: 10px; 
    overflow:hidden;} 

.float-unit { 
    width: 50px; 
    background: #333; 
    color: #fff; 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
    padding: 15px 0; 
    float: left;  /* css3 sources */ 
    } 

, wie Sie sehen, ist die Existenz von overflow: hidden Eigenschaft macht die Sicht völlig verschieden von dem Fall, mit dem das Objekt nicht existiert.

Ich habe gelernt, dass die Eigenschaft overflow: hidden den Inhalt unsichtbar macht, wenn es die Box überfließt, zu der der Inhalt gehört.

aber warum passiert das? Ich meine den Überlauf: versteckte Eigenschaft macht den float-Effekt gelöscht ..

Ich habe viele Artikel gesucht .. aber ich konnte mich nicht völlig verstanden.

Answer 1

Es ist, weil overflow: hidden; einen neuen 'Blockkontext' erstellt, siehe this StackOverflow article on a similar issue.

Was ich vorschlage, ist, wenn Sie in der Art und Weise flexibel sind Sie diese Elemente positionieren, versuchen float: left; in .float-unit zu entfernen und hinzufügen display: flex;-.float-frame als der Schwimmer Stil nicht zu Position Blockelemente gemeint ist.