BFC レイアウト ルール:
CSS3 では、BFC はフロー ルートと呼ばれます。
簡単な例:
1. アダプティブ 2 列レイアウト
コードは次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> body{ width:350px; position:relative; } div.sidebar{ float:left; width:100px; height:200px; background-color:#9deaf1; } div.main{ height:300px; background-color:#5dc2f6; } </style> </head> <body> <div class="sidebar"></div> <div class="main"></div> </body> </html> ページ レンダリング:
上記の例は、BFC レイアウト ルールを正確に反映しています。各要素と、それを含む境界ボックスの左側が接触します (左から右の書式設定の場合、そうでない場合はその逆です)。これは浮きがあった場合にも当てはまります。
つまり、サイドバーは浮動しますが、メインの左側は依然として、それを含むブロックの左側と接触しています。
2. BFC エリアはフロート ボックスと重なりません。例は次のとおりです:
コード:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> body{ width:350px; position:relative; } div.sidebar{ float:left; width:100px; height:200px; background-color:#9deaf1; } div.main{ height:300px; background-color:#5dc2f6; overflow:hidden; } </style> </head> <body> <div class="sidebar"></div> <div class="main"></div> </body> </html> ページ レンダリング:
overflow:hidden; を通じてメイン BFC をトリガーします。メイン領域はフロート サイドバーと重なりません。 BFC エリアがフロート ボックスと重ならないことがわかります。
3. BFC の高さを計算するとき、浮動要素も計算に参加します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> div.wrapper{ width:300px; border:2px solid #5dc2f6; } div.box{ width:100px; height:200px; background-color:#9deaf1; border:2px solid #5dc2f6; float:left; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> <div class="box"></div> </div> </body> </html> ページのレンダリング:
div.wrapper{ width:300px; border:2px solid #5dc2f6; overflow:hidden;} overflow:hidden; を使用して、ラッパーの BFC をトリガーし、 フローティング ボックスの影響をクリアします。 結果のページ レンダリングは次のようになります。 BFC を計算する 高さに達すると、浮遊要素も計算に参加します。
コード:
ページのレンダリングは次のとおりです:
図に示すように、ボックスの垂直方向の距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。したがって、2 つの div 間の垂直距離は 150 ピクセルではなく 100 ピクセルになります。
2 番目の div にラッパーを配置して外側の BFC をトリガーすると、2 つの div は同じ BFC の 2 つの隣接するボックスではなく、2 つの独立した BFC になります。
コード:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> div.box{ width:100px; height:100px; background-color:#9deaf1; border:2px solid #5dc2f6; } div.m50{ margin-bottom:50px; } div.m100{ margin-top:100px; } </style> </head> <body> <div class="box m50"></div> <div class="box m100"></div> </body> </html> ページのレンダリングは次のとおりです:
垂直方向の余白が重なりなくなり、100 ピクセルではなく 150 ピクセルになりました。
概要 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> div.box{ width:100px; height:100px; background-color:#9deaf1; border:2px solid #5dc2f6; } div.wrapper{ overflow:hidden; } div.m50{ margin-bottom:50px; } div.m100{ margin-top:100px; } </style> </head> <body> <div class="box m50"></div> <div class="wrapper"> <div class="box m100"></div> </div> </body> </html>hasLayoutとブロックフォーマットコンテキストのインスタンス分析 1. hasLayoutをトリガーする要素とブロックフォーマットコンテキストを作成する要素のうち、浮動要素は高さの計算に参加します
次のコードを分析します:
以上事例都证明了：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，所以BFC通过改变自己的宽度，实现不与浮动box有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
コンテナはブロック書式設定コンテキストを作成しません。
ケース 2: 作成 BFC のブロックレベルの非置換要素が削除され、IE の hasLayout はトリガーされません。
コードは次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hasLayout 和 BFC</title> <style> div.wrapper{ width:300px; } div#container{ background-color:#9deaf1; zoom:1; } span#span1{ background-color:#5dc2f6; } div#div1{ width:150px; height:50px; background-color:#0576b0; } div#div2{ float:left; background-color:#4dd5b3; } </style> </head> <body> <div class="wrapper"> <div id="container"> <span id="span1">simple text</span> <div id="div1">in flow</div> <div id="div2">float:left</div> </div> </div> </body> </html> コンテナの 'overflow:hidden;' は BFC を作成します。
コンテナの 'overflow:hidden;' は、IE6 ではトリガーされませんが、hasLayout は IE7 でトリガーされます。
二.与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖。
与浮动元素相邻的、触发了 hasLayout 的元素或创建了 Block formatting contexts的元素，都不能与浮动元素相互覆盖。如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可能会定位到浮动元素的下方。
情况1：没有创建BFC的块级非替换元素，触发了 IE 的 hasLayout。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hasLayout 和 BFC</title> <style> div#container{ border:2px solid #ddd; width:300px; height:150px; background:url("http://images0.cnblogs.com/ blog2015/790006/201508/041827351894332.png") repeat; } div#div1{ width:100px; height:100px; background-color:#9deaf1; float:left; filter:alpha("opacity=50"); opacity: 0.5; } div#div2{ background-color:green; zoom:1; } </style> </head> <body> <div id="container"> <div id="div1"> Float Block </div> <div id="div2"> 怀才就象怀孕，时间久了会让人看出来。 </div> </div> </body> </html> IE6：
IE7/IE8
Firefox/Chrome/Safari/Opera
根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，div2 应该有一部分被 div1 覆盖。
情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hasLayout 和 BFC</title> <style> div#container{ border:2px solid #ddd; width:300px; height:150px; background:url("http://images0.cnblogs.com/ blog2015/790006/201508/041827351894332.png") repeat; } div#div1{ width:100px; height:100px; background-color:#9deaf1; float:left; filter:alpha("opacity=50"); opacity: 0.5; } div#div2{ background-color:green; overflow:hidden; } </style></head><body> <div id="container"> <div id="div1"> Float Block </div> <div id="div2"> 怀才就象怀孕，时间久了会让人看出来。 </div> </div></body></html> Firefox/Chrome/Safari/Opera：
IE6：
IE7/IE8
根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，div2 应该有一部分被 div1 覆盖。
三. 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠
情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hasLayout和BFC</title> <style> div.box{ width:100px; height:100px; background-color:#9deaf1; border:2px solid #5dc2f6; } div.wrapper{ zoom:1; } div.m50{ margin-bottom:50px; } div.m100{ margin-top:100px; } </style> </head> <body> <div class="box m50"></div> <div class="wrapper"> <div class="box m100"></div> </div> </body> </html> 根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。
通过zoom:1;在IE中触发了hasLayout,所以，垂直边距不重叠，为150px。
而BFC未触发，所以垂直边距重叠，为100px;
IE6/IE7:
IE8/Firefox/Chrome/Safari/Opera：
情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> div.box{ width:100px; height:100px; background-color:#9deaf1; border:2px solid #5dc2f6; } div.wrapper{ overflow:hidden; } div.m50{ margin-bottom:50px; } div.m100{ margin-top:100px; } </style> </head> <body> <div class="box m50"></div> <div class="wrapper"> <div class="box m100"></div> </div> </body> </html> IE6：
IE7/IE8/Firefox/Chrome/Safari/Opera：
IE7此时触发了hasLayout，但IE6没有触发hasLayout。
hasLayout 和 BFC 的异同及可能产生的问题
区别
共同点
可能产生的兼容性问题:
由于 hasLayout 和 BFC是对一类事物的不同理解，并且他们的启用条件不尽相同，因此如果一个元素设计时，在 IE 早期版本中触发了 hasLayout ，但在其他浏览器中又没有创建BFC，或者相反，一个元素在 IE 早期版本中没有触发 hasLayout ，在其他浏览器中却创建了 BFC（如设置了 ‘overflow:hidden’ ），将导致页面布局的重大差异。
解决方案
仅当一个元素即在 IE 早期版本中触发了 hasLayout，又在其他浏览器中创建了BFC时，才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容，或者相反，两者皆不启用。 使元素即生成了BFC，又触发了 hasLayout 对于触发 hasLayout 的元素，通过 CSS 设置，使它产生BFC； 生成 BFC但是没有触发 hasLayout 的元素，通过设置 ‘zoom:1’，使其触发 hasLayout。 使元素即没有触发 hasLayout，又没有创建 BFC。
如有错误或者不足的地方，还望指正！----妙瞳
文章参考资料：
http://w3help.org/zh-cn/causes/RM8002
自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AMセルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）
HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。
HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AMブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。
HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AMHTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。
HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AMHTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AMHTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
ホットトピック
7754
15164314139852129325123429