CSS では、bfc は中国語で「ブロック レベルの書式設定コンテキスト」を意味します。これは、Web ページのボックス モデル レイアウトの CSS レンダリング モードです。独立したレンダリング領域または分離された独立したコンテナーを指します。ブロック書式設定コンテキストには、それを作成する要素内のすべてのコンテンツが含まれます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
BFC とは
# BFC (ブロック フォーマット コンテキスト) ブロックレベルのフォーマット コンテキストは、Web ページのボックス モデル レイアウトの CSS レンダリング モードです。独立したレンダリング領域または分離された独立したコンテナを指します。
BFC はブロック フォーマット コンテキスト (ブロック レベルのフォーマット コンテキスト) であり、通常のストリームです。
BFC は大きな閉じた箱と考えることができ、箱の中の要素がどれだけ通過しても、外側には影響を与えません。
BFC の形成条件
1. 浮動要素、なし以外の浮動小数点値;
2. 絶対配置要素、位置 (絶対、固定) ;
3. 表示は、次の値のいずれかです: inline-block、table-cell、table-caption、flex;
4. overflow は、visible (hidden、auto、scroll) 以外の値です;
5. ボディルート要素
BFCの特徴
1. 内部ボックスを縦方向に順番に配置します。
2. 垂直方向の距離はマージンで決まります。
3. bfc 領域は float 要素領域と重なりません。
4. bfc の高さを計算するとき、フローティング要素も計算に参加します。
5. Bfc はページ上の独立したコンテナーであり、コンテナー内の子要素は外側の要素に影響を与えません。
実践こそが真実をテストするための唯一の基準です
(1) BFC のボックス アライメント
最初の機能は次のとおりです。内部ボックスは縦方向に順番に配置されます。
#同じことがフローティング要素にも当てはまり、ボックス 3 はフローティングですが、前のボックスに続いて垂直に配置されます。そしてすべてのボックスが左揃えになります。
html：
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>ログイン後にコピー
div {
height: 20px;
}
.container {
position: absolute; /* 创建一个BFC环境*/
height: auto;
background-color: #eee;
}
.box1 {
width: 400px;
background-color: red;
}
.box2 {
width: 300px;
background-color: green;
}
.box3 {
width: 100px;
background-color: yellow;
float: left;
}
.box4 {
width: 200px;
height: 30px;
background-color: purple;
}ログイン後にコピー
(2) マージンフォールディング
2番目の特徴:マージンによって垂直方向の距離が決まる
通常のドキュメント フローでは、2 つの兄弟ボックス間の垂直距離は、それらのマージンによって決まりますが、2 つのマージンの合計ではなく、どちらか大きい方のマージンによって決まります。
html：
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>ログイン後にコピー
.container {
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: green;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: green;
}ログイン後にコピー
ここでは、最初のサブボックスには上部マージンがあることがわかります (マージン貫通の問題は発生しません)。ボックス 垂直方向の余白が崩れて間隔が広くなるため、垂直方向の距離は 30 ピクセルではなく 20 ピクセルになります。
では、垂直方向の余白が崩れないようにする方法はあるのでしょうか?答えは「はい」です。機能の項目 5 には、「bfc はページ上の独立したコンテナーです。コンテナー内のサブ要素は外部の要素に影響を与えず、外部の要素は BFC 内の要素に影響を与えません。」と書かれています。したがって、box1 または box2 を別の BFC に置くだけです。
<div class="container">
<div class="wrapper">
<div class="box1"></div>
</div>
<div class="box2"></div>
</div>ログイン後にコピー
.container {
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.wrapper {
overflow: hidden;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: green;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: green;
}ログイン後にコピー
(3) フローティング要素ではカバーされません
一般的な 2 列レイアウトを次のように取り上げます。例 。
左側には固定幅があり、右側には幅がないため、右側の幅はブラウザ ウィンドウのサイズに応じて適応的に変化します。
html:
<div class="column"></div>
<div class="column"></div>
ログイン後にコピー
.column:nth-of-type(1) {
float: left;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: red;
}
.column:nth-of-type(2) {
overflow: hidden;/*创建bfc */
height: 300px;
background-color: purple;
}ログイン後にコピー
3 列レイアウトもあります。
左側と右側は幅が固定されており、中央には幅がないため、中央の幅はブラウザのサイズに応じて変化します。
html:
<div class="contain">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>ログイン後にコピー
.column:nth-of-type(1),
.column:nth-of-type(2) {
float: left;
width: 100px;
height: 300px;
background-color: green;
}
.column:nth-of-type(2) {
float: right;
}
.column:nth-of-type(3) {
overflow: hidden; /*创建bfc*/
height: 300px;
background-color: red;
}ログイン後にコピー
は、フォントの折り返しを防ぐためにも使用できます:
フローティング ボックスがボックスを覆うことが知られています。下のボックス内のテキストは覆われませんが、テキストはフローティング ボックスを囲みます。これも興味深い機能です。
html：
<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>ログイン後にコピー
css：
(1) サラウンド
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
p {
background-color: green; /* overflow: hidden; */
}ログイン後にコピー
(2)使用bfc はラップを防止します
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
p {
background-color: green;
overflow: hidden;
}ログイン後にコピー
(4) BFC にはフローティング ブロックが含まれます
这个是大家再熟悉不过的了，利用overflow:hidden清除浮动嘛，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。这个就不过多解释了，相信大家都早已理解。
⑵ BFC可以包含浮动的元素(清除浮动)
浮动的元素会脱离普通文档流，来看下下面一个例子:
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>ログイン後にコピー
由于容器内元素浮动脱离文档流，导致容器只剩下2px边距高度，我们这时候可以采用BFC：
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>ログイン後にコピー
⑶ 可以阻止元素被浮动元素覆盖
先看一个文字环绕效果:
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
ログイン後にコピー
这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，
在第二个元素中加入 overflow: hidden，就会变成：
学习视频分享：css视频教程
以上がCSS BFC とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
