フロントエンド エンジニアの面接では、多かれ少なかれ BFC (ブロック フォーマット コンテキスト) 関連の知識について尋ねられます。私も日々の開発でBFCの問題に遭遇したことがありますが、この分野の知識をきちんと整理できていないので、他人に聞かれても、そんな概念を知っているとはあえて言えませんo(╯□╰)o。この 2 日間、私はこの知識のギャップを埋めるためにいくつかの記事を注意深く読みました。
BFC とは何ですか?
BFC とは何かを理解する前に、ボックスとフォーマットコンテキストの概念を理解する必要があります
ボックス: CSS レイアウトの基本単位
ボックスはオブジェクトであり、基本単位です直感的に言えば、ページは多数のボックスで構成されます。要素の種類と表示属性によってボックスの種類が決まります。さまざまなタイプのボックスがさまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。ボックス分類:
ブロックレベルボックス: 表示属性がブロック、リスト項目、およびテーブルである要素は、ブロックレベルのボックスを生成します。また、ブロックの書式設定コンテキストに参加します。
inline-level box: 表示属性が inline、inline-block、および inline-table である要素は、インライン レベルのボックスを生成します。また、インライン書式設定コンテキストに参加します。
run-in ボックス: 表示属性が run-in である要素は、コンテキストに基づいてオブジェクトがインライン オブジェクトであるかブロックレベル オブジェクトであるかを決定します。 。 CSS3のプロパティです！
コンテキストのフォーマット
コンテキストのフォーマットは、W3C CSS2.1 仕様の概念です。これはページ上のレンダリング領域であり、そのサブ要素がどのように配置されるか、および他の要素との関係や相互作用を決定する一連のレンダリング ルールがあります。最も一般的な書式設定コンテキストは、ブロック 書式設定コンテキスト (BFC) とインライン 書式設定コンテキスト (IFC) です。
BFC 定義
BFC (Block Formatting Context) ブロックレベルの書式設定コンテキスト。独立したレンダリング領域であり、ブロックレベルのボックスのみが参加し、内部のブロックレベルのボックスを指定します。配置されているのはこのエリアの外とは何の関係もありません。
BFC レイアウト規則
内部のボックスは垂直方向に次々と配置されます
ボックスの垂直方向の距離はmargin によって決定 同じ BFC に属する 2 つの隣接するボックスのマージンが重なることが決定されます
各要素のマージン ボックスの左側は、要素の左側と接しています包含ブロック境界ボックス (左から右への書式設定の場合、それ以外の場合はその逆)
BFC 領域はフロート ボックスと重なりません
BFC はページ上の分離です。独立したコンテナーであり、コンテナー内の子要素は外部の要素に影響を与えません。その逆
BFC の高さを計算するとき、浮動要素も計算に参加します
どの要素が BFC を生成するか
ルート要素
float 属性は none ではありません
位置は絶対または固定です
表示inline -block、table-cell、table-caption、flex、inline-flex です
オーバーフローは表示されません
BFC の機能と原理
1. 適応型 2 列レイアウト
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background-color: #f66; } .main { height: 200px; background-color: #fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body> 表示効果:
BFC レイアウト規則第 3 条に準拠:
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
したがって、浮動要素は別にありますが、main の左側は依然として包含ブロックの左側と接触しています
4 番目の BFC レイアウト ルールに従って:
BFC的区域不会与float box重叠
Generate BFC によって main をトリガーして、適応型 2 列レイアウトを実装できます。
.main { height: 200px; background-color: #fcc; overflow: hidden; } main がトリガーされて BFC を生成すると、この新しい BFC はフローティング サイドと重なりません。したがって、含まれるブロックの幅と脇の幅に応じて自動的に狭くなります。効果は次のとおりです:
2. 内部フロートのクリア
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; }</style><body> <div class="par"> <div class="child"></div> <div class="child"></div> </div></body> 表示効果:
BFC によるレイアウト ルール 6 番目のバー:
计算BFC的高度时，浮动元素也参与计算
内部フロートをクリアするために、par をトリガーして BFC を生成できます。その後、par が高さを計算するときに、par 内の浮動要素の子も計算に参加します。 🎜>
.par { border: 5px solid #fcc; width: 300px; overflow: hidden; } 効果は次のとおりです。 3. 垂直マージンの重なりを防止します
<style> p { width: 200px; line-height: 100px; margin: 100px; font-weight: bold; color: #f55; background-color: #fcc; text-align: center; }</style><body> <p>heihei</p> <p>gagaga</p></body>表示効果2 つの p の間の距離は 100px で、マージンのオーバーラップが発生します
2 番目の BFC レイアウト ルールに従います:
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠margin重叠规则：* 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值* 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值* 两个外边距一正一负时，折叠结果是两者的相加的和p の外側でコンテナをラップし、 BFC を生成するコンテナ。この場合、2 つの P は同じ BFC に属さず、マージンの重複は発生しません
<style> .wrap { overflow: hidden; } p { width: 200px; line-height: 100px; margin: 100px; font-weight: bold; color: #f55; background-color: #fcc; text-align: center; }</style><body> <p>heihei</p> <div class="wrap"><p>gagaga</p></div></body>表示効果:
总结
其实以上的几个例子都体现了BFC布局规则第五条：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此！
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
参考
前端精选文摘：BFC 神奇背后的原理
我对BFC的理解
谈外margin collapsing(外边距叠加)
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
