CSS に BFC が隠されている

スタイルを記述するとき、期待を達成するためにスタイルを追加したり、特定の属性を変更したりすることがよくあります。そして、BFC はその中に隠されており、スタイルを変更すると、気付かないうちに誤ってトリガーされてしまう可能性があるため、BFC の魔法に気付かないことがあります。この記事では、CSS に隠されている BFC について皆さんの参考になれば幸いです。

1. BFC (Block Formatting Context) とは何ですか

CSS スタイルを記述するとき、要素に css を設定するには、まずその要素がブロックレベル要素であるかインライン要素であるかを知る必要があります。 BFC はブロック レベル ボックスのフォーマットに使用されます。

フォーマットコンテキスト: ページ内のレンダリング領域を指し、サブ要素の配置方法、およびサブ要素の相互作用や他の要素との相互作用を決定する一連のレンダリングルールがあります。

BFC 定義: ブロックレベルの書式設定コンテキスト。独立したブロックレベルのレンダリング領域を指します。ブロックレベルのボックスのみが参加します。この領域には、ブロックレベルのボックスのレイアウトを制約する一連のレンダリングルールがあります。エリア外です 何もすることがありません。

2. BFC の生成

BFC はレンダリング領域であると述べましたが、このレンダリング領域はどこにあり、その具体的なサイズはどれくらいでしょうか?これらは、BFC を生成する要素によって決定されます。

次の CSS ステートメントのいずれかを満たす要素は BFC を生成します:

1. ルート要素またはそれを含む他の要素

2. float の値は none ではありません。

4. オーバーフローの値は静的ではありません。

6. フレックスボックス (要素の表示: flex または inline-flex);

注: 一部の人々は、display: table が BFC を生成できると考えています。主な理由は、テーブルがデフォルトで匿名のテーブルセルを生成することだと思います。 BFC を生成するのはこの匿名テーブルセルです。

3. BFC

のレイアウトルールを簡単にまとめると、次のようになります。 1. BFC の通常の流れとして理解できる、内部要素が縦方向に順番に配置されます 2要素の垂直方向の距離はマージンによって決まります。つまり、同じ BFC に属する 2 つの隣接するボックスのマージンが重なる可能性があります

3。 (左から右へ、そうでない場合はその逆)、これはフロートがある場合でも当てはまります。これは、BFC 内のサブ要素がその包含ブロックを超えないことを意味します

4。フロート要素の面積を使用します 5. BFC の高さを計算するとき、フローティングサブ要素も計算に参加します 6. BFC はページ上で分離された独立したコンテナーです。外部の要素には影響しませんし、その逆も同様です

4. BFC のアプリケーション



ここまで述べたところで、私たちの BFC は何の役に立つのでしょうか?以下では、いくつかの問題を解決するためにいくつかの例を使用します:

例 1. マージンの重複問題を解決する

CSS をプレイする友人は皆、マージンの崩壊を知っています。つまり、隣接する垂直要素に同時にマージンが設定された後、実際のマージン 値はそれらの大きい方に集約されます。 基本原則は同じ BFC 内にあるということで、「同じ BFC に属する 2 つの隣接する要素のマージンが重なる」というルールに従います。

<span style="font-size: 14px;">margin重叠现象：<br><br><br><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><br><br>    <p class="box"><br>        </p>
<p>Lorem ipsum dolor sit.</p>
<br>        <p>Lorem ipsum dolor sit.</p>
<br>        <p>Lorem ipsum dolor sit.</p>
<br>    <br><br><br></span>

実験の結果、上下のマージンが重なっていることが分かりました。

要素の 1 つをコンテナでラップし、そのコンテナをトリガーして BFC を生成できます。この場合、2 つの要素は異なる BFC に属し、マージンの重複は発生しません。

次の変更を加えました:

<span style="font-size: 14px;"><p class="box"><br>    </p>
<p>Lorem ipsum dolor sit.</p>
<br>    <p style="overflow:hidden;"><br>        </p>
<p>Lorem ipsum dolor sit.</p>
<br>    <br>    <p>Lorem ipsum dolor sit.</p>
<br><br></span>

overflow:hidden; を使用して BFC を生成し、マージンの重複問題を正常に解決しました。

实例2、解决浮动问题

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

<span style="font-size: 14px;"><br><br><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><br><br>    <!-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 --><br>    <p class="one"><br>    </p>
<p class="two">Hello World!</p>
<br>    <br>    你好世界！<br><br><br></span>

我们做如下修改：

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

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

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

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

<span style="font-size: 14px;"><br><br><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><br><br>    <p class="box1">box1</p>
<br>    <p class="box2">box2</p>
<br><br><br></span>

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

我们做如下修改：

<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环境，根据BFC的不与float box重叠的规则，解决了侵占元素问题。

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

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

相关推荐：

什么是BFC？对bfc的简单理解

关于BFC与高度塌陷的问题

BFC布局原理

以上がCSS に BFC が隠されているの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。