Heim > Artikel > Web-Frontend > BFC in CSS versteckt

BFC in CSS versteckt

小云云Original: 2017-12-09 16:26:261534Durchsuche

Beim Schreiben von Stilen fügen wir oft einen Stil hinzu oder ändern ein bestimmtes Attribut, um unsere Erwartungen zu erfüllen. Und BFC ist darin verborgen. Wenn Sie den Stil ändern, können Sie ihn versehentlich auslösen, ohne es zu merken, sodass Sie die Magie von BFC nicht erkennen. In diesem Artikel stellen wir Ihnen den in CSS versteckten BFC vor und hoffen, dass er für alle hilfreich ist.

1. Was ist BFC (Block Formatting Context)

Wenn wir CSS-Stile schreiben und CSS für ein Element festlegen, müssen wir es zuerst wissen this Unabhängig davon, ob es sich bei dem Element um ein Element auf Blockebene oder ein Inline-Element handelt, wird BFC zum Formatieren von Boxen auf Blockebene verwendet.

Formatierungskontext: Bezieht sich auf einen Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Regeln, die die Positionierung seiner Unterelemente sowie deren Interaktion und Interaktion mit anderen bestimmen Elemente.

BFC-Definition: Formatierungskontext auf Blockebene, der sich auf einen unabhängigen Rendering-Bereich auf Blockebene bezieht, an dem nur Box auf Blockebene beteiligt ist. Dieser Bereich verfügt über eine Reihe von Rendering-Regeln zur Einschränkung Blockebene Das Layout der Box, unabhängig von der Außenseite des Bereichs.

2. Generierung von BFC

Wir haben erwähnt, dass BFC ein Rendering-Bereich ist. Wo ist dieser Rendering-Bereich und wie groß ist er? schon wieder viel? Diese werden durch die Elemente bestimmt, die den BFC generieren.

Elemente, die eine der folgenden CSS-Deklarationen erfüllen, generieren einen BFC:

1, das Stammelement oder andere Elemente, die es enthalten

Der Wert von float ist nicht none; >4. Der Wert von position ist nicht statisch;

5 >

6. Flex-Boxen (Elementanzeige: Flex oder Inline-Flex); Der Hauptgrund dafür ist, dass die Tabelle standardmäßig eine anonyme Tabellenzelle generiert, und diese anonyme Tabellenzelle generiert BFC.

3. BFC-Layoutregeln

Eine einfache Zusammenfassung lautet wie folgt: 1 Interne Elemente werden nacheinander angeordnet Die Anordnung in vertikaler Richtung kann als regelmäßiger Fluss in BFC verstanden werden 2. Der vertikale Abstand der Elemente wird durch den Rand bestimmt, dh die Ränder zweier benachbarter Felder, die zum selben BFC gehören, können sich überlappen

3. Jeder Der linke Rand des Elements steht in Kontakt mit der linken Grenze des enthaltenden Blocks (von links nach rechts, andernfalls umgekehrt), auch wenn Float vorhanden ist, was bedeutet, dass die Unterelemente in BFC seinen enthaltenden Block 4. BFC Der Bereich überschneidet sich nicht mit dem Bereich des Float-Elements

5 Bei der Berechnung der Höhe des BFC sind auch schwebende Unterelemente an der Berechnung beteiligt6 , und die Unterelemente im Container werden nicht beeinflusst und umgekehrt

4. Anwendung von BFC

Mit So viel gesagt, was nützt unser BFC? Im Folgenden verwenden wir einige Beispiele, um einige Probleme zu lösen:

Beispiel 1. Lösung des Randüberlappungsproblems

Freunde, die CSS spielen, kennen alle den Randkollaps Das heißt, nachdem für benachbarte vertikale Elemente gleichzeitig Ränder festgelegt wurden, wird der tatsächliche Randwert auf den größeren reduziert.

Das Grundprinzip besteht darin, dass sie sich im selben BFC befinden, was der Regel entspricht, dass „die Ränder zweier benachbarter Elemente, die zum selben BFC gehören, überlappen“.

<span style="font-size: 14px;">margin重叠现象：<br><!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <meta http-equiv="X-UA-Compatible" content="ie=edge"><br>    <title>margin重叠现象</title><br>    <style type="text/css"><br>        *{margin: 0;padding: 0;}<br>        .box p {<br>            margin: 20px 0px;<br>            background-color: skyblue;<br>        }<br>    </style><br></head><br><body><br>    <p class="box" ><br>        <p>Lorem ipsum dolor sit.</p><br>        <p>Lorem ipsum dolor sit.</p><br>        <p>Lorem ipsum dolor sit.</p><br>    </p><br></body><br></html><br></span>

Durch die experimentellen Ergebnisse haben wir festgestellt, dass sich der obere und untere Rand überlappen.

BFC in CSS versteckt

Wir können einen Container um eines der Elemente wickeln und den Container auslösen, um einen BFC zu generieren. Dann gehören die beiden Elemente zu unterschiedlichen BFCs und es kommt nicht zu einer Randüberlappung. BFC in CSS versteckt Wir nehmen folgende Änderungen vor:

BFC in CSS versteckt

Wir haben overflow:hidden; zum Generieren eines BFC verwendet und das Randüberlappungsproblem erfolgreich gelöst.

实例2、解决浮动问题

我们知道给父元素设置overflow:hidden可以清除子元素的浮动，但往往都不知道原理是什么。
其实这就是应用了BFC的原理：当在父元素中设置overflow:hidden时就会触发BFC，所以他内部的元素就不会影响外面的布局，BFC就把浮动的子元素高度当做了自己内部的高度去处理溢出，所以外面看起来是清除了浮动。

<span style="font-size: 14px;"><!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <meta http-equiv="X-UA-Compatible" content="ie=edge"><br>    <title>BFC浮动问题</title><br>    <style><br>        .one {<br>            /* 文档流 里面的文字标签将父元素撑起来 */<br>            background-color: pink;<br>        }<br>        .two {<br>            float: left;<br>        }<br>    </style><br></head><br><body><br>    <!-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 --><br>    <p class="one"><br>    <p class="two">Hello World!</p><br>    </p><br>    你好世界！<br></body><br></html><br></span>

BFC in CSS versteckt

我们做如下修改：

<span style="font-size: 14px;">.one {<br>        background-color: pink;<br>        overflow: hidden;<br>    }<br></span>

BFC in CSS versteckt

对比发现，当我们一个元素设置成为BFC之后，计算BFC元素高度的时候，浮动元素也参与了计算。

实例3、解决侵占浮动元素的问题

我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。

<span style="font-size: 14px;"><!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <meta http-equiv="X-UA-Compatible" content="ie=edge"><br>    <title>BFC侵占浮动元素的问题</title><br>    <style><br>        .box1 {<br>            float: left;<br>            width: 100px;<br>            height: 100px;<br>            background-color: pink;<br>        }<br>        .box2 {<br>            width: 200px;<br>            height: 200px;<br>            background-color: skyblue;<br>        }<br>    </style><br></head><br><body><br>    <p class="box1">box1</p><br>    <p class="box2">box2</p><br></body><br></html><br></span>

BFC in CSS versteckt

当一个元素浮动，另一个元素不浮动时，浮动元素因为脱离文档流就会盖在不浮动的元素上。

我们做如下修改：

<span style="font-size: 14px;">.box2 {<br>        width: 200px;<br>        height: 200px;<br>        background-color: skyblue;<br>        overflow: hidden;<br>    }<br></span>

或如下修改：

<span style="font-size: 14px;">.box2 {<br>        width: 200px;<br>        height: 200px;<br>        background-color: skyblue;<br>        /* overflow: hidden; */<br>        float: left;<br>    }  <br></span>

BFC in CSS versteckt

我们为非浮动元素建立BFC环境，根据BFC的不与float box重叠的规则，解决了侵占元素问题。

这一特性，我认为还是很有用的，特别是应用在两栏布局上，对比我们常规为非浮动元素或非定位元素设置margin来挤开的方法，其优点在于不需要去知道浮动或定位元素的宽度。

以上就是关于BFC的一些分析，BFC 是一种概念，是对前端布局技术的一种理论上的总结，掌握它可以让我们在使用CSS +p进行布局时，知道一些特殊操作以及规避问题的原理。BFC的概念比较抽象，但通过实例分析，有助于我们对BFC的理解。

In Verbindung stehende Artikel

Mehr sehen