Detaillierte Erläuterung der CSS-Randüberlappung und Lösungssuche

Ich habe kürzlich einige CSS-bezogene Wissenspunkte überprüft und die klassischen Randüberlappungsprobleme in CSS sortiert und zusammengefasst. Der Zweck besteht darin, den Überprüfungseffekt zu testen und anderen zu helfen. Wenn es Auslassungen gibt, würde ich gerne die Front-End-Veteranen um Ratschläge bitten.

Frage: Wenn Sie das CSS-Layout verwenden, werden Sie feststellen, dass sich die von Geschwister- oder Eltern-Kind-Knoten festgelegten oberen und unteren Ränder überlappen, wie in der folgenden Abbildung dargestellt

    <Stil>
        .aus {
            Breite: 100 %;
            Hintergrundfarbe: rosa;
        }

        .out>div {
            Höhe: 100px;
            Breite: 100 %;
            Hintergrundfarbe: rgb(223, 136, 23);
            Rand: 5px 0 10px;
        }
    </Stil>
    <Abschnitt Klasse="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </Abschnitt>

Wenn wir die Höhe des gesamten Abschnitts überprüfen, sollte sie eigentlich 345 Pixel betragen, aber aufgrund der Überlappung der Ränder des übergeordneten und untergeordneten Elements sowie der Geschwisterelemente stellen wir fest, dass die Höhe 320 Pixel beträgt. Wie lässt sich dieses Problem also in der Praxis lösen?
Das Erstellen eines BFC (Full Block Formatting Context) kann dieses Problem lösen. Lassen Sie uns zunächst das Prinzip des BFC klären.

Die Elemente innerhalb des BFC beeinflussen die externen Elemente nicht und es handelt sich um einen relativ unabhängigen geschlossenen Bereich.
Es gibt keine vertikale Randüberlappung zwischen benachbarten BFCs. Mit anderen Worten: Wenn Sie möchten, dass sich die Elementränder nicht überlappen, müssen Sie einen BFC-Bereich erstellen.
Der BFC-Bereich überlappt sich nicht mit der Box des schwebenden Elements.
Bei der Berechnung der Höhe des BFC werden auch schwimmende Elemente berücksichtigt;
Wie erstelle ich einen Blockformatierungskontext?
1. Setzen Sie die Überlaufeigenschaft auf „Nicht sichtbar“.
2. Float ist nicht Keiner;
3. Der Wert der Position ist nicht statisch oder relativ;
4. Wenn das Anzeigeattribut eine Tabelle ist;

    <Stil>
        .aus {
            Breite: 100 %;
            Hintergrundfarbe: rosa;
            Überlauf: versteckt;
        }

        .out>div {
            Höhe: 100px;
            Breite: 100 %;
            Hintergrundfarbe: rgb(223, 136, 23);
            Rand: 5px 0 10px;
            /* Überlauf: versteckt; */
            schweben: links;
        }
    </Stil>
    <Abschnitt Klasse="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </Abschnitt>

Wenn wir die Höhe des Abschnitts erneut überprüfen, stellen wir fest, dass die Höhe wieder auf 345 Pixel zurückgekehrt ist. Dies beweist auch, dass bei der Berechnung der Höhe durch BFC auch die Höhe der schwebenden untergeordneten Elemente berücksichtigt wird.

Dies ist das Ende dieses Artikels mit einer detaillierten Erklärung der CSS-Randüberlappung und der Lösungssuche. Weitere relevante Inhalte zur CSS-Randüberlappung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!