CSSにおけるBFCとIFCの使用例の分析-CSSチュートリアル-php.cn

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

小云云

リリース： 2018-02-02 10:44:38

オリジナル

1823 人が閲覧しました

以前、誰かが 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 機能は、要素が次の条件のいずれかを満たしている限りトリガーできます:

body ルート要素;
none ではない float 属性値。 (絶対、固定)
表示は: inline-block、table-cells、flex
overflow 表示以外の値(hidden、auto、scroll)
2番目のBFCの特性とアプリケーション

1 同じBFCに属する隣り合う2つのBoxの+上下のマージンが重なることが決まります。

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

<head>
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  
</head>

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

ログイン後にコピー

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

ログイン後にコピー

レンダリングは次のとおりです:

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

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

.wrap {  
  overflow:hidden;  

.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;

ログイン後にコピー

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

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

<p style="border: 1px solid #000;">
    <p style="width: 50px; height: 50px; background: #eee;
               float: left;">
    </p>
</p>

ログイン後にコピー

次の効果を実現します:

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

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

<p style="border: 1px solid #000;overflow: hidden">
    <p style="width: 100px;height: 100px;background: #eee;float: left;"></p>
</p>

ログイン後にコピー

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

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

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

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

p { width:300px; } .aside { width: 100px; height: 150px; float: left; background: black; } .main { height:200px; background-color:red; }

をトリガーすることもできます。このようにして、2 列レイアウトの適応を実現するために使用できます。

3 IFC の簡単な紹介

IFC レイアウトルール:

1 ボックスは、含まれているブロックの上から順番に水平に配置されます。

2 これらのボックスを配置するとき、水平方向の内側と外側のマージンと境界線が占めるスペースが垂直方向に考慮され、これらのボックスはさまざまな形式で配置される場合があります: 水平方向のマージン、パディング、境界線は有効です。、垂直方向は無効です。幅と高さは指定できません。

3 ラインボックスの幅は、含まれるブロックと既存のフロートによって決まります。ラインボックスの高さは、行の高さによって決まります。