CSS und BFC (Blockformatierungskontext)

Ich wusste vorher nicht, was BFC ist, nachdem ich es heute gelesen hatte, wurde mir klar, dass ich schon oft damit in Berührung gekommen war, aber ich kannte einfach nicht den professionellen Namen. Genau wie Schließungen und Vererbung wurden sie früher oft verwendet, aber ich wusste es einfach nicht. Heute werde ich über BFC der CSS-Positionierung sprechen.

BFC hängt mit dem Löschen von Floats zusammen. Lassen Sie uns also darüber sprechen, wie man Floats löscht. Es gibt zwei Hauptmethoden zum Löschen von Floats:

①Verwenden Sie das Clear-Attribut, um Floats zu löschen

②Machen Sie den übergeordneten Container zu einem BFC

Bevor ich über BCF spreche, möchte ich sagen, dass es drei Hauptpositionierungsschemata zur Steuerung des Layouts von Elementen gibt: Normaler Fluss und Floats und absolute Positionierung

***Normaler Fluss

Im normalen Fluss werden die Elemente von oben nach unten entsprechend ihrer sequentiellen Position in HTML angeordnet. Bei diesem Vorgang werden die Inline-Elemente horizontal angeordnet, bis die Zeile voll ist, und dann Die Zeilenumbrüche und die Elemente auf Blockebene werden als vollständige neue Zeile gerendert. Sofern nicht anders angegeben, werden alle Elemente standardmäßig im normalen Fluss positioniert wird durch seine Position im HTML-Dokument bestimmt.

***Floats

In einem Float-Layout erscheinen Elemente zuerst entsprechend der Position des normalen Flusses und werden dann je nach Richtung so weit wie möglich nach links oder rechts versetzt des Schwimmers.

***Absolute Positionierung

In einem absolut positionierten Layout wird das Element vom normalen Fluss als Ganzes getrennt, sodass das absolut positionierte Element seine Geschwisterelemente nicht beeinflusst (während es schwebend ist). Elemente wirken sich auf Geschwisterelemente aus), und die spezifische Position des Elements wird durch die Koordinaten der absoluten Positionierung bestimmt.

BFC gehört zum gewöhnlichen Stream und hat daher keine Auswirkungen auf die Geschwisterelemente.

&&--Definition von BFC--&&

Beim Layout von Box-Elementen stellt BFC eine Umgebung bereit, in der das Layout nach bestimmten Regeln keine Auswirkungen auf andere Umgebungen hat. Beispielsweise bilden schwebende Elemente einen BFC. Die Unterelemente innerhalb des schwebenden Elements werden hauptsächlich vom schwebenden Element beeinflusst, und die beiden schwebenden Elemente haben keinen Einfluss aufeinander. Mit anderen Worten: Wenn ein Element die Bedingungen erfüllt, um ein BFC zu werden, beeinflussen sich Layout und Positionierung der internen Elemente des Elements nicht gegenseitig (es sei denn, die interne Box erstellt einen neuen BFC) und es handelt sich um einen isolierten unabhängigen Container .

&&--Was genau ist BFC--&&

Wenn es um das visuelle Layout geht, bietet Block Formatting Context eine Umgebung, in der HTML-Elemente nach bestimmten Regeln angeordnet werden. Elemente in einer Umgebung haben keinen Einfluss auf das Layout anderer Umgebungen. Beispielsweise bilden schwebende Elemente einen BFC. Die Unterelemente innerhalb des schwebenden Elements werden hauptsächlich vom schwebenden Element beeinflusst, und die beiden schwebenden Elemente beeinflussen sich nicht gegenseitig. Dies ähnelt in gewisser Weise der Vorstellung, dass ein BFC eine unabhängige Verwaltungseinheit ist.

&&--So bilden Sie BFC--&&

①Der Wert von float ist nicht none.

②Der Wert des Überlaufs ist nicht sichtbar.

③Der Wert von display ist einer von table-cell, table-caption und inline-block.

④Der Wert der Position ist nicht relativ oder statisch.

⑤Flex-Boxen in CSS3

&&--Die Rolle von BFC--&&

①Enthält schwebende Elemente (klare Floats)

BFC wird darauf basieren Untergeordnete Elemente Passen Sie die Höhe an die Situation an. Mit dieser Funktion werden die Stile overflow:hidden/auto/scroll und float:left/right für das übergeordnete Element verwendet, um das schwebende Element

② zu schließen, das nicht vom schwebenden Element Das schwebende Element wird ignoriert. Das Vorhandensein von Geschwisterelementen deckt die Geschwisterelemente ab. Das Erstellen eines BFC für die Geschwisterelemente kann verhindern, dass diese Situation auftritt.

&&--BFC hat drei Hauptmerkmale-&&

①BFC verhindert, dass die Ränder zusammenfallen

Die vertikalen Ränder zweier verbundener ps überlappen sich. In der tatsächlichen Entwicklung benötigen wir diese Art der Faltung möglicherweise nicht. In diesem Fall können wir eine der Funktionen von BFC verwenden. Verhindern Sie, dass sich die Ränder überlappen. Verhindert das Zusammenfallen der Ränder von übergeordneten und untergeordneten Elementen. Nur wenn zwei Elemente auf Blockebene benachbart sind und sich im gleichen Formatierungskontext auf Blockebene befinden, überlappen sich die vertikalen Ränder zwischen ihnen. Das heißt, selbst wenn zwei Elemente auf Blockebene benachbart sind, werden ihre Ränder nicht reduziert, wenn sie sich nicht im selben Formatierungskontext auf Blockebene befinden. Gleichzeitig sind die Ränder des BFC-Elements nicht mit seinen untergeordneten Elementen ausgeblendet.

②BFC kann schwebende Elemente enthalten

Dies ist genau das Prinzip der Verwendung der Methoden „overflow:hidden“ und „overflow:auto“, um das obige Float zu schließen. Verwenden Sie „overflow:hidden“ oder „overflow:auto“, um die BFC-Funktion auszulösen übergeordnetes Element des Floating-Elements, sodass Sie Floating-Elemente enthalten und das Float schließen können.

Der Originaltext von W3C lautet „‚Auto‘-Höhen für Blockformatierungskontextwurzeln“, d. h. BFC passt sich automatisch an die Höhe entsprechend der Situation der untergeordneten Elemente an, auch wenn seine untergeordneten Elemente schwebende Elemente enthalten .

Aber IE6-7 unterstützt nicht den BFC von W3C, sondern verwendet sein eigenes hasLayout. In Bezug auf die Leistung ist es BFC sehr ähnlich, außer dass hasLayout selbst viele Probleme hat, was zu einer Reihe von Fehlern in IE6-7 führt. Die Bedingungen zum Auslösen von hasLayout ähneln in gewisser Weise denen zum Auslösen von BFC. Kayo wird einen Artikel schreiben, um die spezifische Situation vorzustellen. Hier empfiehlt Kayo, das IE-spezifische CSS-Attribut „Zoom: 1“ festzulegen, um das Zoomverhältnis des Elements festzulegen oder abzurufen. Ein Wert von „1“ bedeutet, dass „Zoom: 1“ verwendet wird kann hasLayout auslösen ohne Es hat andere Auswirkungen auf die Elemente, was relativ praktischer ist.

③BFC kann verhindern, dass Elemente durch schwebende Elemente abgedeckt werden.
Wie oben erwähnt, ignorieren die Blockgeschwisterelemente von schwebenden Elementen die Position von schwebenden Elementen und versuchen, die gesamte Zeile zu belegen, sodass sie es sind Durch Floating-Elemente abgedeckt, kann das Auslösen von BFC für dieses Geschwisterelement dies verhindern.

Weitere Artikel zum Thema CSS BFC (Block Formatting Context) finden Sie auf der chinesischen PHP-Website!