Warum verhindern Überlauf, dass schwimmende Elemente ihrem Container entkommen? Eine effektive Lösung für dieses Problem besteht darin, die Eigenschaft "Überlauf" des Containers auf "versteckt" festzulegen. Während dies in der Praxis gut funktioniert, kann sein zugrunde liegender Mechanismus rätselhaft sein.

Um das Verhalten zu verstehen, müssen wir das Konzept der Blockformatierungskontexte (BFC) berücksichtigen. Wenn "Überlauf" auf "Hidden" eingestellt ist, stellt der Container einen BFC fest. BFCs haben erhebliche Auswirkungen auf Floats und Löschen.

Insbesondere innerhalb eines BFC -Floats beeinflussen nur das Layout anderer Elemente innerhalb dieses BFC. Sie erstrecken sich nicht über ihre Grenzen hinaus oder stören Elemente außerhalb davon. Dies stellt sicher, dass die schwimmenden Elemente in ihrem beabsichtigten Raum enthalten bleiben.

Darüber hinaus gilt die „klare“ Eigenschaft nur für Schwimmkörper innerhalb desselben BFC. Das Setzen von 'Überlauf' in 'Hidden' erzeugt einen BFC und isoliert effektiv die schwimmenden Elemente aus allen externen Einflüssen. Infolgedessen wird verhindert, dass sie ihrem Container entkommen.

durch Einrichtung eines BFC, "Überlauf: Hidden" bietet eine saubere und kreuzbrowserische Lösung, um zu verhindern, dass schwebende Elemente in benachbarte Elemente eindringen. Es unterhält ein gut strukturiertes Seitenlayout, ohne dass zusätzliche Markups oder komplexe Problemumgehungen erforderlich sind.