Was ist BFC? Was ist der Nutzen?

BFC

(Empfohlenes Tutorial: CSS-Schnellstart)

Das heißt, Blockformatierungskontext (Blockformatierungskontext) Ja Teil der visuellen Darstellung des CSS der Seite. Es handelt sich um einen Bereich, der zur Bestimmung des Layouts von Blockboxen und der Interaktion von Floats verwendet wird.

Mein Verständnis:

Elemente in dieser Umgebung haben keinen Einfluss auf das Layout anderer Umgebungen. Mit anderen Worten: Elemente in anderen BFCs haben keinen Einfluss auf das Layout anderer Umgebungen. stören sich gegenseitig.

Funktion:

1. Randfaltung verhindern

Die vertikalen Ränder zweier verbundener Elemente auf Blockebene überlappen sich, und bei einigen betrachte ich diese Situation als Fehler, aber ich denke, es liegt möglicherweise an Überlegungen zum Absatzlayout und an dieser Funktion, um einen konsistenten Zeilenabstand sicherzustellen. Schauen wir uns zunächst ein Beispiel an:

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

Wie Sie oben sehen können, legen wir den Rand für beide p-Elemente fest, aber der Raum in der Mitte ist reduziert. Dann nehmen Sie ein Beispiel von BFC:

.ele{
    overflow: hidden;
    border: solid 1px red;
}

Wie oben zu sehen ist, setzen wir den Überlaufwert für jedes div-Element auf „hidden“ und generieren so einen Formatkontext auf Blockebene , da sich die Ränder nicht überlappen.

2. BFC kann schwebende Elemente enthalten

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

Wie aus den laufenden Ergebnissen ersichtlich ist, wenn das Element auf Blockebene ist enthält Die Höhe des schwebenden Elements wird reduziert, aber nach der Umwandlung in einen BFC berücksichtigt der BFC das schwebende Element automatisch bei der Berechnung der Höhe.

3. BFC kann verhindern, dass Elemente durch schwebende Elemente abgedeckt werden

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

Wie aus dem Obigen ersichtlich ist, wenn die Wenn das Element schwebend ist, überlappen sich nachfolgende Elemente auf Blockebene. Um dieses Problem zu lösen, erstellen Sie einfach einen BFC für die folgenden Elemente. Fügen Sie das Überlaufattribut zu box2 hinzu.

overflow: hidden;
*zoom: 1;

Dadurch wird verhindert, dass schwebende Elemente überlappen.

Das obige ist der detaillierte Inhalt vonWas ist BFC? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!