CSS レイアウトと BFC の詳細な分析

CSS レイアウトには、一度理解すると CSS レイアウト能力を大幅に向上できる概念がいくつかあります。この記事は、ブロック フォーマット コンテキスト (BFC) について説明しています。この用語について聞いたことはないかもしれませんが、CSS を使用してレイアウトを行ったことがある場合は、おそらくそれが何であるかを知っているでしょう。BFC とは何か、その仕組み、および BFC の作成方法を理解することは非常に重要です。 CSS でレイアウトがどのように機能するかを理解していること。

(推奨チュートリアル: CSS チュートリアル )

この記事では、BFC とは何かを身近な例を用いて説明します。次に、display に新しい値を指定します。これは、BFC とは何か、そしてなぜそれが必要なのかを理解している場合にのみ意味を持ちます。

BFC とは

Web ページの CSS レンダリングでは、ブロック レベルの書式設定コンテキスト (Block Frommatting Context) がブロック レベルのボックスに従ってレイアウトされます。 W3C では、BFC を次のように定義しています。

浮動要素と絶対配置要素、ブロック レベルのボックスではないブロック レベルのコンテナ (インライン ブロック、テーブル セル、テーブル キャプションなど)、およびオーバーフロー「 表示可能な」ブロックレベルボックス以外の値は、その内容に対して新しい 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;
}

テキストの一部を削除すると、画像を囲むのに十分なコンテンツがなくなり、フロートがドキュメント フローから削除されるため、境界線が消えてしまいます。画像の下をテキストの高さまで繰り返します。

これは、要素をフローティングすると、ボックス text の幅が同じままで、フローティング要素用のスペースを確保するために短縮されるためです。テキストの行ボックス。そのため、フロートの後ろに背景と境界線が表示されます。

このレイアウトの問題を解決するには、通常 2 つの方法があります。 1 つの方法は、clearfix ハック を使用することです。これは、テキストと画像の下に要素を挿入し、それを clear:both に設定することで実現します。別の方法は、デフォルトの visible 以外の値を指定して overflow 属性を使用することです。

.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 はマージンの崩壊を防ぐことができます

マージンの結合を理解することも過小評価されている CSS スキルです。次の例では、背景色が灰色の p があると仮定します。

この p には 2 つのタグ 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 要素のマージンと外側の p のマージンの間には何もないため、この 2 つは崩れ、p 最終的には次のようになります。 p の上下と面一になります。 p の上下には灰色は見られません。

CSS では、2 つの隣接するボックス (兄弟または祖先の可能性があります) のマージンを 1 つのマージンに結合できます。マージンを結合するこの方法は折りたたみと呼ばれ、結果として生じるマージンは折りたたまれたマージンと呼ばれます。折り畳まれた結果は、次のルールに従って計算されます:

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 浏览器支持情况

display:flow-root を使用すると、BFC を安全に作成して、フローティング要素のラップ、マージンの重なりの防止、周囲のフローティング要素の防止など、上記のさまざまな問題を解決できます。

この属性に対するブラウザのサポートは現在制限されています。この属性値が非常に便利だと思われる場合は、Edge でサポートするよう投票してください。しかし、とにかく、BFC とは何か、オーバーフローやその他のメソッドを使用してフロートをラップする方法、および BFC によって要素がフロート要素を囲むのを防ぐことができることを理解する必要があります。エラスティック レイアウトまたはグリッド レイアウトを使用したい場合は、次の方法で実行できます。ダウングレード処理に BFC のこれらの機能を使用できるようにブラウザをサポートします。

ブラウザが Web ページをレイアウトする方法を理解することは、非常に基本的なことです。取るに足らないことのように思えることもありますが、これらの小さなことで、CSS レイアウトの作成とデバッグにかかる​​時間を短縮できます。

以上がCSS レイアウトと BFC の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。