Front-End-Interview: Wenn Sie nach BFC gefragt werden, müssen Sie so antworten, um die volle Punktzahl zu erhalten

Tipp: Als hochfrequentierte Testseite für Frontend-Interviews wird BFC oft gefragt, was ist BFC? Die Rolle des BFC? Wie löst man BFC aus? diese Fragen. Die Antworten der Kandidaten sind jedoch oft unbefriedigend, entweder unklar oder unvollständig.Ich glaube, dass Sie nach dem Lesen dieses Artikels ein tieferes Verständnis von BFC haben werden!

---

BFC

1. Verstehen

Offizielle Erklärung: BFC (Blockformatierungskontext) wird wörtlich als „Blockformatierungskontext“ übersetzt, was ein separater Renderbereich ist, der angibt, wie das Innere angeordnet ist, und die untergeordneten Elemente dieses Bereichs wirken sich nicht auf die Elemente außerhalb aus.
Um es klar zu sagen: BFC ist wie ein sicherer Bereich.Die Anordnung aller Elemente in diesem Bereich (einschließlich Schweben, Positionieren usw.) hat keinen Einfluss auf die Anordnung anderer Elemente außerhalb.

2. Funktion

1. 清除浮动
2. 处理外边距合并问题(又叫外边距塌陷)
3. 使浮动元素不遮挡普通元素

3. Szenariodemonstration

3.1 Schwimmer löschen

Wenn wir das obige Jobsuche-Funktionsmodul entwerfen wollen, wissen wir beim Entwerfen des gesamten Jobsuche-Moduls nicht, wie viele Untermodule später hinzugefügt werden müssen, so dass 不会给外层容器添加高度die Untermodule oft automatisch den gesamten Container öffnen .

Als nächstes müssen wir alle Submodule nach links ausrichten, daher wird Float (float:left) oft wie folgt gesetzt:
css

<style>      
	div {
     
     
		/*只给容器设置了宽度*/
		width: 300px;
		padding: 10px;
		background-color: #fae8c8;
	}
	span {
     
     
		/*给子模块添加浮动*/
		float: left;
		padding-bottom: 30px;
		width: 25%; 
	}
</style>

html

<div>
    <h2><a class='title1'>求职简历</a></h2>
    <span><a href="#">销售</a></span>
    <span><a href="#">导购</a></span>
    <span><a href="#">厨师</a></span>
    <span><a href="#">房产经纪</a></span>
    <span><a href="#">文员</a></span>
    <span><a href="#">收银</a></span>
    <span><a href="#">配菜</a></span>
    <span><a href="#">保险经纪</a></span>
    <span><a href="#">前台</a></span>
    <span><a href="#">营业员</a></span>
    <span><a href="#">服务员</a></span>
    <span><a href="#">人事</a></span>
    <span><a href="#">客服</a></span>
    <span><a href="#">保安</a></span>
    <span><a href="#">洗碗工</a></span>
    <span><a href="#">平面设计</a></span>
    <span><a href="#">会计</a></span>
    <span><a href="#">电工</a></span>
    <span><a href="#">迎宾</a></span>
    <span><a href="#">仓车管理</a></span>
</div>

Das Ergebnis ist in der Tat dasselbe:

Durch das Floating des Span-Tags (Submodul) wird es vom Dokumentenfluss getrennt, sodass es dem übergeordneten Container nicht mehr hilft, die Höhe zu strecken, was zum üblichen „Floating Collapse“ führt. Phänomen . Um dieses Phänomen zu lösen, müssen wir den Schwimmer löschen, hier können wir BFC verwenden :
Es gibt viele Bedingungen zum Auslösen von BFC, hier nehmen wir das Hinzufügen von overflow(hidden) zum übergeordneten Element als Beispiel:
(Im folgenden Abschnitt Ich werde die üblichen Methoden zum Auslösen von BFC-Bedingungen zusammenfassen.)

div {
    
    
	/*我们只需要在原基础上，向父元素添加overflow：hidden属性即可*/
	overflow: hidden;
	width: 300px;
	padding: 10px;
	background-color: #fae8c8;
}

Der Effekt

ist sichtbar, setzen Sie einfach das Attribut overflow: hidden auf den übergeordneten Container, um die BFC-Funktion auszulösen, und der übergeordnete Container wird zu einem speziellen „ BFC-Container “. Tatsächlich wird hier ein Schlüsselmerkmal von BFC
gezeigt , nämlich: Bei der Berechnung der Höhe von BFC werden auch schwimmende Elemente an der Berechnung teilnehmen . Deshalb kann BFC die negativen Auswirkungen des Schwebens beseitigen!

3.2 Handhabung von Margin-Merging/Collapse

Angenommen, wir haben zwei Elemente:

Wir setzen das blaue Modul 下外边距bzw. das rote 上外边距Modul.Angenommen, die beiden äußeren Ränder sind jeweils auf 20px eingestellt, dann können wir uns leicht denken: Abstand zwischen den beiden Modulen = 20px + 20px, also 40px Abstand zwischen ihnen.

Die Codepraxis ist wie folgt:
css

<style>
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /*添加下外边距*/ 
        margin-bottom: 20px;   
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        /*添加上外边距*/ 
        margin-top: 20px;       
    }
</style>

html

<div class="blue"></div>
<div class="red"></div>

Das Ergebnis war alles andere als ideal:

Ja, die beiden Ränder wurden zusammengeführt, daher der Name "Margin Merge" . (Wenn der Abstand zwischen den beiden Seiten nicht gleich ist, wählen Sie den größten äußeren Rand als Abstand zwischen den beiden). Um das Problem des Zusammenführens von Rändern zu lösen, können wir die beiden Elemente mit dem BFC-Attribut :
css in eine Box packen

<style>
    .BFC_container {
     
     
    	/*设置overflow触发BFC*/
        overflow: hidden;
    }
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-bottom: 20px; 
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px; 
    }
</style>

html

/*分别将两个元素包裹在一个附带BFC属性的容器中*/
<div class="BFC_container">
    <div class="blue"></div>
</div>

<div class="BFC_container">
    <div class="red"></div>
</div>

Wirkung

Daher besteht die zweite Rolle von BFC darin, den Zusammenbruch des äußeren Rands des Elements zu bewältigen.

3.3 Schwebende Elemente überdecken keine normalen Elemente mehr

Wir alle wissen, dass das schwebende Element aus dem Fluss des Dokuments herauskommt, was die negative Situation verursachen kann, andere gewöhnliche Elemente zu verdecken, wie folgt:

Wir können sehen, dass das orange schwebende Element das grüne gewöhnliche Element verdeckt, dann wollen wir das Lassen Sie die Ebenen ausrichten und beeinflussen sich nicht mehr gegenseitig. Sie können gewöhnlichen Elementen BFC-Attribute hinzufügen, um Folgendes zu vervollständigen:
css

<style>
    .float_div {
     
     
        float: left;
        width: 100px;
        height: 100px;      
        background-color: tomato;
    }
    .common_div {
     
     
    	/*给普通元素添加BFC属性*/
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: springgreen;
    }
</style>

html

<div class="float_div">浮动元素</div>
<div class="common_div">普通元素</div>

Effekt:

Wir können sehen, dass durch Setzen des BFC-Attributs auf das gemeinsame Element die beiden Elemente nicht aneinander haften und sich gegenseitig beeinflussen.

3. Allgemeine Bedingungen zum Auslösen von BFC

1. Die Überlaufeigenschaft ist 不为sichtbar (z. B.: versteckt, scrollen)
2. Die Float-Eigenschaft ist 不为none (z. B.: left, right)
3. Position 只有ist absolut oder fest

Die oben genannten drei sind die am häufigsten verwendeten Bedingungen zum Auslösen von BFC, und die am meisten empfohlene Auslösemethode ist: overflow: hidden .

• Weil beim Scrollen eine Ziehleiste rechts vom Rand hinzugefügt wird.
• Das Auslösen von BFC mit dem Float-Attribut kann andere Modullayouts verursachen, da dieses Modul ein Float generiert und sich außerhalb des Dokumentenflusses befindet
• Das Festlegen der Positionseigenschaft kann auch Auswirkungen auf das Layout anderer Module beinhalten

Daher ist die am meisten empfohlene Methode, overflow: hidden zu verwenden, um das BFC-Attribut auszulösen, wodurch die geringsten Kosten zur Lösung des Problems reduziert werden können!