Eine ausführliche Analyse des CSS-Layouts und BFC

Es gibt einige Konzepte im CSS-Layout, die, sobald Sie sie verstanden haben, Ihre CSS-Layoutfähigkeiten wirklich verbessern können. In diesem Artikel geht es um den Blockformatierungskontext (BFC). Sie haben vielleicht noch nie von diesem Begriff gehört, aber wenn Sie jemals Layout mit CSS erstellt haben, wissen Sie wahrscheinlich, was es ist, und es ist sehr nützlich zu verstehen, was BFC ist, wie es funktioniert und wie man BFC erstellt, was das kann helfen Ihnen zu verstehen, was in CSS passiert.

(Empfohlenes Tutorial: CSS-Tutorial)

In diesem Artikel wird anhand bekannter Beispiele erklärt, was BFC ist. Anschließend wird ein neuer Wert für display angegeben, der nur dann Sinn macht, wenn Sie verstehen, was BFC ist und warum Sie ihn benötigen. display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。

什么是 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。

// html
<p>
  </p><p>I am a floated element.</p>
  I am text inside the outer box.


// css
.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。

这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。

我们通常有两种方法来解决这个布局问题。一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。

.outer {
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default-tab=

overflow 以这种方式工作的原因是，使用 visible 的初值以外的任何值都会创建一个块格式化上下文，而 BFC 的一个特性是它包含浮动。

BFC 是布局中的一个迷你布局

你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。BFC 还会导致一些其他有用的行为。

BFC 可以防止 margin 折叠

了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 p。

这个 p 包含两个标签 p。外部 p 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。

// html
<p>
  </p><p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>

  
// css
.outer {
   background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

因为 p 元素的 margin 和外部 p 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 p 的顶部和底部齐平。 我们在 p

Was ist BFC

Beim CSS-Rendering einer Webseite wird der Formatierungskontext auf Blockebene (Block Fromatting Context) entsprechend der Box auf Blockebene angeordnet. Das W3C definiert BFC wie folgt:

Floatierte Elemente und absolut positionierte Elemente, Container auf Blockebene, die keine Boxen auf Blockebene sind (wie Inline-Blöcke, Tabellenzellen und Tabellenüberschriften) und Überlaufwerte ​​sind nicht „sichtbar“ Boxen auf Blockebene erstellen neue BFCs (Formatkontexte auf Blockebene) für ihren Inhalt.

BFC ist eine unabhängige Layoutumgebung, in der das Elementlayout nicht von der Außenwelt beeinflusst wird. In einem BFC werden Blockboxen und Linienboxen (Linienboxen bestehen aus allen Inline-Elementen in einer Reihe) vertikal ausgerichtet der Rand seines übergeordneten Elements.

Das Verhalten eines Blockformatierungskontexts (BFC) ist anhand eines einfachen float-Beispiels leicht zu verstehen. Im Beispiel unten habe ich ein Feld mit einem nach links schwebenden Bild und etwas Text. Wenn genügend Text vorhanden ist, wird dieser um das schwebende Bild und den Rand herum und dann um den gesamten Bereich herum umbrochen.

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

🎜🎜🎜 Wenn ich einen Teil des Textes entferne, reicht der Inhalt nicht aus, um das Bild zu umgeben, und da der Float aus dem Dokumentfluss entfernt wird, steigt der Rand nach oben und unter das Bild, bis er die Höhe des Texts erreicht. 🎜🎜🎜🎜Dies Dies liegt daran, dass beim Schweben eines Elements die Breite des Felds, in dem sich der 🎜Text🎜 befindet, unverändert bleibt und das Zeilenfeld des Texts gekürzt wird, um Platz für das schwebende Element zu schaffen. Deshalb erscheinen Hintergrund und Rand hinter dem Float. 🎜🎜Wir haben normalerweise zwei Möglichkeiten, dieses Layoutproblem zu lösen. Eine Möglichkeit besteht darin, den clearfix-Hack🎜 zu verwenden, der auf den Text wirkt Fügen Sie ein Element unter dem Bild ein und setzen Sie es auf clear:both. Eine Alternative besteht darin, das Attribut overflow mit einem anderen Wert als dem Standardwert visible zu verwenden. 🎜

<p>
  </p><p>I am a floated element.</p>
  <p>I am text</p>

🎜🎜🎜Demo ansehen: https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default-tab=🎜🎜overflow Der Grund dafür, dass es so funktioniert, ist, dass die Verwendung eines anderen Werts als des Anfangswerts von visible einen Blockformatierungskontext erstellt und ein Merkmal von BFC darin besteht, dass es Gleitkommazahlen enthält. 🎜

BFC ist ein Mini-Layout innerhalb eines Layouts

🎜Sie können sich BFC als ein Mini-Layout innerhalb einer Seite vorstellen. Sobald ein Element einen BFC erstellt, enthält dieser den gesamten Inhalt. Wie wir sehen, handelt es sich dabei auch um schwebende Elemente, die nicht mehr über den Boden der Box hinausragen. BFC führt auch zu einigen anderen nützlichen Verhaltensweisen. 🎜

🎜BFC verhindert Margin-Zusammenbruch 🎜

🎜Das Verstehen der Margin-Zusammenführung ist eine weitere unterschätzte CSS-Fähigkeit. Gehen Sie im nächsten Beispiel davon aus, dass Sie ein p mit einer grauen Hintergrundfarbe haben. 🎜🎜Dieser p enthält zwei Tags p. Der margin-bottom des äußeren p-Elements beträgt 40 Pixel, und der obere und untere margin des p-Tags betragen jeweils 20 Pixel. 🎜

.text {
  overflow: auto;
}

🎜Da sich zwischen dem Rand des p-Elements und dem Rand am äußeren p nichts befindet, kollabieren die beiden, sodass am Ende das p übrig bleibt Bündig mit der Ober- und Unterseite von p. Über und unter p sehen wir kein Grau. 🎜🎜🎜🎜🎜In CSS können die Ränder zweier benachbarter Felder (die Brüder oder Vorfahren sein können) zu einem einzigen Rand zusammengefasst werden. Diese Art des Zusammenführens von Rändern wird als Reduzieren bezeichnet, und die resultierenden Ränder werden als kollabierte Ränder bezeichnet. Das Faltergebnis wird nach folgenden Regeln berechnet: 🎜

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/YEvzRv?height=500&theme-id=0&slug-hash=YEvzRv&user=&default-tab=

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

<p>
  </p><p>I am a floated element.</p>
  <p>I am text</p>

带有 float 类的项被向左浮动，因此 p 中的文本在它环绕 float 之后。

我可以通过将包裹文本的 p 设置为 BFC 来防止这种包裹行为。

.text {
  overflow: auto;
}

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

查看演示：https://codepen.io/anon/embed/qVKEpJ?height=500&theme-id=0&slug-hash=qVKEpJ&user=&default-tab=

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

<p>
    </p><p>column 1</p>
    <p>column 2</p>
    <p>column 3</p>

对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

未创建 BFC 之前：

添加以下样式创建一个 BFC:

.column:last-child {
  float: none;
  overflow: hidden; 
}

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

还有什么能创建 BFC?

除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。

使用以下方式都能创建 BFC

• float 的值不是 none。
• position 的值不是 static 或者 relative。
• display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
• overflow 的值不是 visible

创建 BFC 的新方式

使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。

这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?

最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值：display:flow-root。

flow-root 浏览器支持情况

Sie können display:flow-root verwenden, um BFCs sicher zu erstellen, um die verschiedenen oben genannten Probleme zu lösen: schwebende Elemente umschließen, Überlappung von Rändern verhindern und umgebende schwebende Elemente verhindern.

Die Browserunterstützung für dieses Attribut ist derzeit begrenzt. Wenn Sie der Meinung sind, dass dieser Attributwert sehr praktisch ist, stimmen Sie bitte dafür, dass Edge ihn unterstützt. Aber auf jeden Fall sollten Sie jetzt verstehen, was BFC ist und wie man Überlauf- oder andere Methoden zum Umschließen von Floats verwendet, und wissen, dass BFC verhindern kann, dass Elemente Float-Elemente umgeben. Wenn Sie ein elastisches oder Rasterlayout verwenden möchten, können Sie dies tun Unterstützen Sie ihre Browser auf verschiedene Arten, diese Funktionen von BFC für die Downgrade-Verarbeitung zu nutzen.

Es ist sehr grundlegend zu verstehen, wie Browser Webseiten gestalten. Auch wenn es manchmal belanglos erscheinen mag, können diese kleinen Dinge die Zeit verkürzen, die zum Erstellen und Debuggen von CSS-Layouts benötigt wird.

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse des CSS-Layouts und BFC. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!