ホームページ > 記事 > ウェブフロントエンド > ブロックレベルの書式設定コンテキストとは何ですか?ブロックレベルの書式設定コンテキストを作成する役割 (コードが添付されています)

ブロックレベルの書式設定コンテキストとは何ですか?ブロックレベルの書式設定コンテキストを作成する役割 (コードが添付されています)

不言オリジナル: 2018-08-06 09:55:182536ブラウズ

(ブロック書式設定コンテキスト) は、文字通り「ブロックレベルの書式設定コンテキスト」と訳されます。これは、ブロックレベルボックスのみが参加する独立したレンダリング領域であり、内部のブロックレベルボックスがどのようにレイアウトされるかを規定し、この領域の外側とは何の関係もありません。では、ブロックレベルの書式設定コンテキストを作成する方法と、書式設定コンテキストの役割は何でしょうか?次の記事では、ブロックレベルの書式設定コンテキストについて説明します。

私たちがよく話すドキュメントフローは、実はポジショニングフロー、フローティングフロー、通常フローの3種類に分けられます。通常のフローは、実際には BFC の FC を指します。
FC は、フォーマットコンテキストの略語で、文字通りフォーマットコンテキストと訳されます。これは、サブ要素がどのようにレイアウトされるか、および他の要素との関係と役割を決定する一連のレンダリングルールを持っています。。

素人向けに説明すると、

BFC は、特定の要素の CSS 属性として単純に理解できますが、この属性を持つ要素は、開発者が明示的に変更することはできません。内部要素と外部要素は、BFC といういくつかの特性を示します。

BFC のトリガー条件は、ブロックレベルの書式設定コンテキストを作成するための条件です:

==次の条件のいずれかが満たされた場合に BFC をトリガーできます==

[1] ルート要素、そのはHTML要素です

[2]floatの値はnoneではありません

【3】overflowの値は表示されません

【4】displayの値はinline-block、table-cell、table-captionです

【5】positionの値は絶対値または固定値です

フォーマットコンテキスト(BFC)作成のルール:

1. 内部のBoxは縦方向に順番に配置されます。

2. ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なります

3. 各要素のマージンボックスの左側は、それを含むブロック境界ボックスの左側と接触します (左から右への書式設定の場合、それ以外の場合)。反対）。これは浮きがあった場合にも当てはまります。

4. BFC エリアはフロートボックスと重なりません。

5.BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。

6. BFC の高さを計算するとき、浮動要素も計算に参加します

BFC のレイアウト規則 1: 内部ボックスは垂直方向に次々に配置されます。

私たちが通常話すボックスは、マージン、ボーダー、パディング、コンテンツで構成されます。実際には、各タイプの 4 つの辺が、常にコンテンツボックス、パディングボックス、ボーダーボックス、およびマージンボックスを定義します。マージンボックスは、ブロックボックスと、それを含むブロック内の隣接するブロックボックス間の垂直方向の間隔を決定します。

BFC レイアウトルール 2: Box の垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。

包含ブロック内のブロックボックスと隣接するブロックボックス間の垂直方向の間隔を決定するのはマージンボックスです

BFC レイアウトルール 3: 各要素のマージンボックスの左側は、各要素の境界ボックスの左側に接します含まれているブロック (左から右へのフォーマットの場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

分析: 2 つの子 ps に float を追加します。float の結果、float がクリアされていない場合、親 p は後続の 2 つの ps をラップしませんが、それらは依然として親 p の範囲内にあります。左の浮動小数点は子 p に属します。左辺は親 p の境界ボックスの左側に接し、浮動右辺は子 p が親 p の境界ボックスの右側に接することを意味します。距離を増やすように設定されている場合、このルールは常に同じです。

BFC レイアウトルール 4: BFC 領域はフロートボックスと重なりません:

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

上記のサイドボックスはフロート属性を持ち、メインボックスのコンテンツをカバーし、メインボックスはサイドのフロートをクリアしません。箱。独自の BFC をトリガーするという 1 つのアクションのみが実行され、その後はサイドボックスによってカバーされなくなります。したがって、BFC エリアはフロートボックスと重なりません。

BFC の機能:

1. 適応型 2 列レイアウト

2. 要素が浮動要素によって覆われないようにすることができます。

3. 浮動要素を含めることができます。

4.別のBFCにマージンの重なりを防ぐことができます

BFC関数1:適応2列レイアウト

まだ上記のコードですが、この時点ではBFC領域はフロートボックスと重ならないので、ベースになります。包含ブロック (親 p) の幅と脇の幅、適応幅。

BFCとLayout

IEは、奇妙なブラウザとして、もちろんBFC標準を段階的にサポートすることができないため、IEにはLayoutがあります。レイアウトとBFC 基本的に同等ですが、IE との互換性に対処するために、BFC をトリガーする必要がある場合は、トリガー条件で CSS プロパティを使用して BFC をトリガーすることに加えて、IE もターゲットにする必要があります。ブラウザは、zoom: 1 を使用して IE ブラウザのレイアウトをトリガーします。

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC 関数 3: 浮動要素を含めることができます - 内部浮動小数点をクリアします

オーバーフローを追加します: 親 pparent に非表示になります
浮動小数点の原則をクリアします: 親 p の BFC 属性をトリガーし、次の子 ps が親 p の同じ BFC エリア内で、この時点でフロートは正常にクリアされています。フロートをクリアする目的を達成するために、同じ方向にフロートすることもできます。フロートをクリアする原理は、両方の p です。は同じフローティング BFC 領域にあります

BFC 関数 4: マージンの重複を防止します:

2 つの隣接するブロックレベルのサブ要素が異なる BFC に属している場合、マージンの重複を防ぐことができます

操作方法: いずれかの周囲に p をラップします。この p の BFC は、2 つの p のマージンが重ならないようにすることができます

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

ブロックレベルの書式設定コンテキストとは何ですか?ブロックレベルの書式設定コンテキストを作成する役割 (コードが添付されています)

フォーマットコンテキスト(BFC)作成のルール:

関連記事