フロントエンドインタビュー：BFCについて尋ねられた場合、満点を獲得するにはこの方法で回答する必要があります

ヒント：フロントエンドインタビューの高頻度テストサイトとして、BFCはBFCとは何ですか？BFCの役割は？BFCをトリガーする方法は？これらの質問。ただし、候補者の回答が不十分な場合が多く、不明確または不完全です。この記事を読んだ後は、BFCをより深く理解できると思います。

---

BFC

1.理解する

公式説明：BFC（ブロックフォーマットコンテキスト）は、文字通り「ブロックフォーマットコンテキスト」として翻訳されます。これは、内部のレイアウト方法を指定する別個のレンダリング領域であり、この領域の子要素は外部の要素に影響を与えません。
率直に言って、BFCはセーフエリアのようなものです。このエリア内のすべての要素のレイアウト（フローティング、ポジショニングなどを含む）は、外部の他の要素のレイアウトに影響を与えません。

2.機能

1. 清除浮动
2. 处理外边距合并问题(又叫外边距塌陷)
3. 使浮动元素不遮挡普通元素

3.シナリオのデモンストレーション

3.1クリアフロート

上記の求職機能モジュールを設計する場合、求職モジュール全体を設計するときに、後で追加する必要のあるサブモジュールの数がわからないため、多くの場合不会给外层容器添加高度、サブモジュールはコンテナ全体を自動的に開きます。 。

次に、すべてのサブモジュールを左に揃える必要があるため、float（float：left）は次のように設定されることがよくあります
。css

<style>      
	div {
     
     
		/*只给容器设置了宽度*/
		width: 300px;
		padding: 10px;
		background-color: #fae8c8;
	}
	span {
     
     
		/*给子模块添加浮动*/
		float: left;
		padding-bottom: 30px;
		width: 25%; 
	}
</style>

html

<div>
    <h2><a class='title1'>求职简历</a></h2>
    <span><a href="#">销售</a></span>
    <span><a href="#">导购</a></span>
    <span><a href="#">厨师</a></span>
    <span><a href="#">房产经纪</a></span>
    <span><a href="#">文员</a></span>
    <span><a href="#">收银</a></span>
    <span><a href="#">配菜</a></span>
    <span><a href="#">保险经纪</a></span>
    <span><a href="#">前台</a></span>
    <span><a href="#">营业员</a></span>
    <span><a href="#">服务员</a></span>
    <span><a href="#">人事</a></span>
    <span><a href="#">客服</a></span>
    <span><a href="#">保安</a></span>
    <span><a href="#">洗碗工</a></span>
    <span><a href="#">平面设计</a></span>
    <span><a href="#">会计</a></span>
    <span><a href="#">电工</a></span>
    <span><a href="#">迎宾</a></span>
    <span><a href="#">仓车管理</a></span>
</div>

結果は実際に同じです。

スパンタグ（サブモジュール）がフローティングであるため、ドキュメントフローから分離されているため、親コンテナが高さを伸ばすのに役立たなくなり、一般的な「フローティング折りたたみ」が発生します。この現象を解決するには、フロートをクリアする必要があります。ここではBFCを使用できます。BFC
をトリガーするための条件はたくさんあります。ここでは、例として親要素にオーバーフロー（非表示）を追加します。
（次のセクションでは、 BFC状態をトリガーする一般的な方法を要約します）

div {
    
    
	/*我们只需要在原基础上，向父元素添加overflow：hidden属性即可*/
	overflow: hidden;
	width: 300px;
	padding: 10px;
	background-color: #fae8c8;
}

効果

が表示されます。overflow：hidden属性を親コンテナに設定してBFC機能をトリガーすると、親コンテナは特別な「BFCコンテナ」になります。実際、 BFCの重要な機能が
ここに示されています。つまり、BFCの高さを計算するときに、浮動要素も計算に参加します。そのため、BFCはフローティングの悪影響をクリーンアップできます。

3.2証拠金のマージ/折りたたみの処理

青いモジュール下外边距と赤いモジュールをそれぞれ設定する2つの要素がある上外边距とします.2つの外側の余白がそれぞれ20pxに設定されているとすると、2つのモジュール間の距離= 20px + 20px、つまり40pxの距離です。それらの間の。

コードプラクティスは次のとおりです
。css

<style>
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /*添加下外边距*/ 
        margin-bottom: 20px;   
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        /*添加上外边距*/ 
        margin-top: 20px;       
    }
</style>

html

<div class="blue"></div>
<div class="red"></div>

結果は理想的とは言えませんでした。

はい、2つのマージンがマージされたため、「マージンマージ」という名前が付けられました。（2つの辺の間の距離が等しくない場合は、2つの辺の間の距離として最大の外側マージンを選択します）。マージンのマージの問題を解決するために、BFC属性を持つボックスに2つの要素をラップすることができます：
css

<style>
    .BFC_container {
     
     
    	/*设置overflow触发BFC*/
        overflow: hidden;
    }
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-bottom: 20px; 
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px; 
    }
</style>

html

/*分别将两个元素包裹在一个附带BFC属性的容器中*/
<div class="BFC_container">
    <div class="blue"></div>
</div>

<div class="BFC_container">
    <div class="red"></div>
</div>

効果

したがって、BFCの2番目の役割は、要素の外側マージンの崩壊に対処することです。

3.3フローティング要素は通常の要素をカバーしなくなりました

フローティング要素がドキュメントのフローから外れることは誰もが知っています。これにより、次のように、他の通常の要素を覆い隠すというネガティブな状況が発生する可能性があります。

オレンジ色のフローティング要素が緑色の通常の要素を覆い隠すことがわかります。平面を並べて相互に影響を与えないようにするには、通常の要素にBFC属性を追加して次のように完了します
。css

<style>
    .float_div {
     
     
        float: left;
        width: 100px;
        height: 100px;      
        background-color: tomato;
    }
    .common_div {
     
     
    	/*给普通元素添加BFC属性*/
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: springgreen;
    }
</style>

html

<div class="float_div">浮动元素</div>
<div class="common_div">普通元素</div>

効果：

BFC属性を共通要素に設定することにより、2つの要素が互いにくっついて影響を与えないことがわかります。

3.BFCをトリガーするための一般的な条件

1. オーバーフロープロパティが不为表示されます（非表示、スクロールなど）
2. floatプロパティは不为noneです（例：左、右）
3. 位置只有は絶対または固定です

上記の3つは、BFCをトリガーするために最も一般的に使用される条件であり、最も推奨されるトリガー方法は、overflow：hiddenです。

• スクロールを設定すると、境界線の右側にドラッグバーが追加されるためです。
• float属性を使用してBFCをトリガーすると、他のモジュールレイアウトが発生する可能性があります。これは、このモジュールがfloatを生成し、ドキュメントフローから外れるためです。
• positonプロパティの設定には、他のモジュールのレイアウトへの影響も含まれる場合があります

したがって、最も推奨される方法は、overflow：hiddenを使用してBFC属性をトリガーすることです。これにより、問題を解決するための最小のコストを削減できます。