ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSにおけるBFCとIFCの使用例の分析

CSSにおけるBFCとIFCの使用例の分析

小云云
リリース: 2018-02-02 10:44:38
オリジナル
1894 人が閲覧しました

以前、誰かが CSS の BFC について言及しているのを聞いたことがあります。私は IFE の練習中にたまたまマージンフォールディングの問題に遭遇したので、たまたま BFC のメカニズムを理解しました。 (参考ソースは記事末尾の参考記事をご覧ください)

この記事では主にCSSにおけるBFCとIFCの使い方に関する関連情報を紹介していますが、編集者がとても良い内容だと思ったのでシェアさせていただきます。そしてそれを参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1 BFC とは

これまでのすべてのブログ投稿と同様に、「What」の観点から紹介して、BFC を浅いところから深いところまで理解しましょう。

いわゆるフォーマットコンテキスト(フォーマットコンテキスト)は、W3C CSS2.1仕様の概念です。

これはページ上のレンダリング領域であり、一連のレンダリング ルールがあります。

子要素の配置方法、および他の要素との関係や相互作用を決定します。

ブロック フォーマット コンテキスト (BFC、ブロック レベルのフォーマット コンテキスト) は、ブロック レベルの要素のレンダリングおよび表示ルールです。平たく言えば、BFC は、コンテナー内のサブ要素は外側の要素に影響を与えない、大きな閉じたボックスとして理解できます。

BFC のレイアウト規則は次のとおりです。

1 内部ボックスは垂直方向に 1 つずつ配置されます。
2 BFC はページ上で独立した独立したコンテナーです。
3 同じ BFC に属する 2 つの隣接するボックスです。上マージンと下マージンは重なり合います。
4 BFC の高さを計算するとき、フローティング要素も計算に参加します。
5 各要素の左側は、フローティングがある場合でも、含まれるボックスの左側と接触します。
6 BFC の領域は float と重なりません;

それで、BFC をトリガーするにはどうすればよいですか? BFC 機能は、要素が次の条件のいずれかを満たしている限りトリガーできます:

  1. body ルート要素;

  2. none ではない float 属性値。 (絶対、固定)

  3. 表示は: inline-block、table-cells、flex

  4. overflow 表示以外の値(hidden、auto、scroll)

  5. 2番目のBFCの特性とアプリケーション

  6. 次に、BFC の一般的な機能とアプリケーションを紹介します。この部分で理由を説明する際には、上記のレイアウト ルールとトリガー条件が使用されるため、注意が必要です。
1 同じBFCに属する隣り合う2つのBoxの+上下のマージンが重なることが決まります。

上記の例でマージンが折りたたまれている理由は、両方が body のルート要素に属しているためです。そのため、マージンの折りたたみを避けるために、それらが同じ BFC に属さないようにする必要があります:

1

2

3

4

5

6

7

8

9

10

11

12

13

<head>

.p {  

  width:200px;  

  height:50px;  

  margin:50px 0;  

  background-color:red;  

}  

</head>

 

<body>

   <p class="p"></p>  

   <p class="p"></p>  

</body>

ログイン後にコピー

1

2

3

4

<p class="p"></p>  

<p class="wrap">  

  <p class="p"></p>  

</p>

ログイン後にコピー
レンダリングは次のとおりです:

2 BFC には浮動要素 (クリアフロート) を含めることができます

通常の状況では、浮動要素は通常のドキュメントフローから切り離されるため、次のコードでは:

1

2

3

4

5

6

7

8

.wrap {  

  overflow:hidden;  

 

.p {  

  width:200px;  

  height:50px;  

  margin:50px 0;  

  background-color:red;

ログイン後にコピー
外側の p には内部要素を含めることはできませんフローティング p、効果は下の図に示されています:

しかし、BFC 仕様の第 4 条に従って、外部コンテナの BFC をトリガーすると、BFC の高さを計算するときに、フローティング要素も参加します。計算では、外部 p コンテナーが浮動要素をラップできるため、次のようにコードを変更するだけです:

1

2

3

4

5

<p style="border: 1px solid #000;">

    <p style="width: 50px; height: 50px; background: #eee;

               float: left;">

    </p>

</p>

ログイン後にコピー

次の効果を実現します:

3 BFC は要素が浮動要素によってカバーされるのを防ぐことができます

まず例を見てみましょう:

1

2

3

<p style="border: 1px solid #000;overflow: hidden">

    <p style="width: 100px;height: 100px;background: #eee;float: left;"></p>

</p>

ログイン後にコピー

効果図は次のとおりです:

この理由は上記のルール 5 によるものです: 各要素の左側は、それを含むボックスの左側と接触しています。フローティングがある場合;

したがって、エフェクトを相補的かつ干渉するように変更したい場合は、ルール 6: BFC の領域はフロートと重ならないようにする必要があります。そのため、

は BFC のプロパティ、つまり

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<p class="aside"></p>  

<p class="main"></p>  

 

p {  

  width:300px;  

}  

.aside {  

  width: 100px;  

  height: 150px;  

  float: left;  

  background: black;  

}  

.main {  

  height:200px;  

  background-color:red;  

}<p></p>

<p> をトリガーすることもできます。このようにして、2 列レイアウトの適応を実現するために使用できます。 <img alt="" src="https://img.php.cn/upload/article/000/054/025/4491227d1f332c6fc0a0ff8890f7b6f3-3.jpg"></p>3 IFC の簡単な紹介<p></p>IFC レイアウト ルール: <p></p>1 ボックスは、含まれているブロックの上から順番に水平に配置されます。 <p></p>2 これらのボックスを配置するとき、水平方向の内側と外側のマージンと境界線が占めるスペースが垂直方向に考慮され、これらのボックスはさまざまな形式で配置される場合があります: 水平方向のマージン、パディング、境界線は有効です。 、垂直方向は無効です。幅と高さは指定できません。<p><img alt="" src="https://img.php.cn/upload/article/000/054/025/4491227d1f332c6fc0a0ff8890f7b6f3-4.jpg">3 ライン ボックスの幅は、含まれるブロックと既存のフロートによって決まります。ライン ボックスの高さは、行の高さによって決まります。 </p>

<p>関連おすすめ: </p>

<p></p>

<p>CSSで重要なBFCについて詳しく解説</p>

<p></p>

<p>BFCと高さ崩壊の問題について</p>

<p></p>

<p><a href="https://www.php.cn/div-tutorial-371936.html" target="_self">BFCとは何ですか? BFC の簡単な理解</a></p><p>以上がCSSにおけるBFCとIFCの使用例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p>

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート