ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSにおけるBFCとIFCの使用例の分析
CSSにおけるBFCとIFCの使用例の分析
- 小云云オリジナル
- 2018-02-02 10:44:381821ブラウズ
以前、誰かが 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の特性とアプリケーション
次に、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 ライン ボックスの幅は、含まれるブロックと既存のフロートによって決まります。ライン ボックスの高さは、行の高さによって決まります。
関連おすすめ:
CSSで重要なBFCについて詳しく解説
BFCと高さ崩壊の問題について
以上がCSSにおけるBFCとIFCの使用例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。