ホームページ >ウェブフロントエンド >CSSチュートリアル >BFCとは何ですか？ BFC について詳しく学び、その役割について話します
BFCとは何ですか？ BFC について詳しく学び、その役割について話します
- 青灯夜游転載
- 2022-07-08 11:29:005829ブラウズ
BFCとは何ですか?次の記事では、BFC を理解し、BFC の役割について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Byte にインタビューしていたとき、面接官に BFC について何か知っているかと尋ねられました。当時、実際にたくさんの記事を読みましたが、わかりませんでした。どの記事も同じようなことを言っている気がして、インタビューでは答えられませんでしたが、王宏源先生の説明を聞いて啓発されたので、皆さんにもシェアしたいと思いました。以下の内容は、Wang Honyuan 先生のフロントエンド システムの授業の概要に基づいています。非常に明確だと思います。Wang Honyuan 先生に感謝します。
BFC## を理解する前に#(ブロック フォーマット コンテキスト)、まず FC(フォーマット コンテキスト) が何であるかを見てみましょう:
- すべてのボックスは FC に属します
- ブロックレベル要素のレイアウトは BFC に属します。たとえば、div/p/h1 など -> BFC レイアウト内の
- インライン レベル要素のレイアウトは IFC に属します。たとえば、img/a/span/i -> IFC レイアウトでは、
質問 1. ブロック レベルの要素はすべて BFC でレイアウトされていますが、この BFC はどこにありますか?
まず、W3C の公式説明を見てみましょう:
- ルート要素 (html)
- 浮動要素 (要素の浮動小数点値はなしではありません)
- 絶対配置要素 (要素の位置は絶対または固定です)
- インライン ブロック要素 (要素の表示はインラインブロックです)
- 表セル (要素の表示は表セル、HTML 表セルのデフォルトはこの値、表タイトル (要素の表示は表キャプション、HTML 表タイトルのデフォルト)この値に) row、tbody、thead、tfoot のデフォルト属性) またはインライン -table)
- オーバーフロー計算値 (Computed) は表示されませんブロック要素
- フレキシブル要素 (表示は直接の子です) flex 要素または inline-flex 要素の要素)
- 网Grid 要素 (表示はグリッド要素または inline-grid 要素の直接の子要素)
- 表示値が flow-root である要素
質問2. BFC の役割
まず BFC の公式ドキュメントを参照してください。機能の説明:
取得できる情報:
- BFC では、各要素の左端が含まれるブロックの左端に近くなります
- #同じ BFC 内で、垂直方向に 2 つの隣接するボックスの余白が重なり、値は次のようになります。 2 つのうち大きい方 (この機能を使用してマージンのオーバーラップ問題を解決できます)
-
関数 1: BFC を使用してマージンのオーバーラップ問題を解決します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html> このとき、htmlのBFCにはbox1とbox1が両方あり、box1とbox2は縦方向に隣接しているためマージンが重なりますので、大きい方の値50px##をとります。
#どうすれば解決できますか?多くの人は BFC を box1 に直接追加することを考えるかもしれないので、overflow:hidden 属性を box1 に直接追加します
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
<div></div>
<div></div>
結果はどうなりますか?
機能しないことがわかりました。この時点で多くの人が混乱しているかもしれませんが、Box1 はすでに BFC を形成しているのに、なぜまだ重複しているのでしょうか?まず、この時点で box1 は確かに BFC を形成していますが (box1 の内部に形成された BFC と理解できます)、要素 box1 自体はまだ box2 と同じ html の BFC に属しているため、それでもマージンのオーバーラップは発生します。
したがって、box1 にレイヤーを追加し、box1 の外側のボックスに BFC を設定する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
overflow: hidden;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>現時点では、box1 は、box1 の BFC に属しています。コンテナ、box2 は html の BFC に属します いいえ 同じ BFC に属するため、マージンの重複問題は解決できます
作用2：解决浮动高度塌陷问题
当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.container {
background-color: orange;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度
事实上，想通过BFC解决高度塌陷问题需要满足两个条件：
浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)
浮动元素的父元素高度为auto
首先我们先看一段W3C的描述
大致意思为BFC的高度是auto情况下，高度是这样计算：
- 如果只有inline-level，是行高的顶部和底部的距离
- 如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）
- 如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）
所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: orange;
/* 通过overflow形成BFC */
overflow: hidden;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
（学习视频分享：web前端入门）
以上がBFCとは何ですか？ BFC について詳しく学び、その役割について話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。