目次
hasLayout 和 BFC 的异同及可能产生的问题
ホームページ ウェブフロントエンド htmlチュートリアル hasLayout とブロックの書式設定コンテキストについて学ぶ (パート 2)_html/css_WEB-ITnose

hasLayout とブロックの書式設定コンテキストについて学ぶ (パート 2)_html/css_WEB-ITnose

Jun 24, 2016 am 11:39 AM

BFC レイアウト ルール:

  • 内部ボックスは垂直方向に次々と配置されます。
  • ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
  • 各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
  • BFC エリアはフロート ボックスと重なりません。
  • BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素に影響を与えません。およびその逆。
  • BFC の高さを計算するとき、浮動要素も計算に参加します。
  • CSS3 では、この概念が変更されました: http://www.w3.org/TR/css3-box/#block-level0
    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 を計算する 高さに達すると、浮遊要素も計算に参加します。

    4. 垂直方向のマージンの重なりを明確にする


    コード:

    rrree

    ページのレンダリングは次のとおりです:

    図に示すように、ボックスの垂直方向の距離はマージンによって決まります。同じ 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をトリガーする要素とブロックフォーマットコンテキストを作成する要素のうち、浮動要素は高さの計算に参加します

  • ケース1:ブロック書式設定コンテキスト内のブロックレベルの非置換要素が作成されていないと、IE の hasLayout がトリガーされます。

    次のコードを分析します:

    以上事例都证明了:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,所以BFC通过改变自己的宽度,实现不与浮动box有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
    ログイン後にコピー

    コンテナはブロック書式設定コンテキストを作成しません。

  • コンテナの 'zoom:1' 設定は、IE で hasLayout をトリガーするものであり、
  • コンテナの高さの値はデフォルトの 'visible' です。インライン要素、div1 は通常のフローのブロック要素です。

  • div2 は浮動ブロックレベル要素です。
  • CSS2.1仕様のセクション10.6.3の高さ計算ルールに従って、通常のフローでブロックレベルの非置換要素の高さを計算する場合、浮動子要素は計算に参加しません。
  • したがって、コンテナの高さを計算するときは、span1 と div1 の影響を受けるだけであり、その 2 つの高さの合計である必要があるため、コンテナの最終的な高さには div2 の高さは含まれません。
  • 各ブラウザでのページ レンダリングの影響は次のとおりです: IE6 IE7:
  • IE8 Firefox Chrome Safari Opera:
  • コンテナのzoom:1が削除された場合、各ブラウザのパフォーマンスは一貫しています:

    ケース 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 でトリガーされます。

    コンテナの高さの値は 'auto' です。

  • span1 はインライン要素、div1 は通常のフローのブロック要素です。

  • div2 は浮動ブロックレベル要素です。
  • ページのレンダリングは次のとおりです:
  • IE6:
  • IE7/IE8/Firefox/Chrome/Safari/Opera
  • コンテナが BFC を作成している限り、その浮動子要素は高さの計算に参加します (IE7 は hasLayout がトリガーされるため、効果は他のブラウザーと同じです)。

    二.与浮动元素相邻的、触发了 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

  • div1 是一个浮动元素,背景是50%的透明
  • div2 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout,但在 IE7 中触发了 hasLayout。
    根据 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 的异同及可能产生的问题

    区别

  • 在 IE8之前的版本中,没有规范中提及的 Block formatting contexts 和 Inline formatting contexts概念,而是用 hasLayout 来达到相似的目的。
  • 在 IE 中可通过设置 ‘width’、’height’、’min-width’、’min-height’、’max-width’、’max-height’、 ‘zoom’、’writing-mode’ 来触发 hasLayout,而这些特性值的设置不能够使元素创建 BFC。
  • 在 IE 中很多元素默认就是拥有布局的,如 IPUNT, BUTTON, SELECT, TEXTAREA 等,但是这些元素在标准中会形成 Inline formatting contexts。
  • 共同点

  • 两者都是决定了对内容如何定位及大小计算的规则。
  • 两者都决定了与其他元素的相互作用的规则。
  • ‘table-cell’ 和 ‘table-caption’ 既是 hasLayout 的元素,又是可以创建 BFC 的元素。
  • 浮动元素,绝对定位元素,inline-block 元素以及除 ‘visible’ 外任意值的 overflow(IE7) 在 IE 中可以触发 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

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

    HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

    HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

    webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

    HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

    HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

    HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

    HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

    HTML:構造、CSS:スタイル、JavaScript:動作 HTML:構造、CSS:スタイル、JavaScript:動作 Apr 18, 2025 am 12:09 AM

    Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

    HTMLの未来:ウェブデザインの進化とトレンド HTMLの未来:ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

    HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

    HTML対CSS対JavaScript:比較概要 HTML対CSS対JavaScript:比較概要 Apr 16, 2025 am 12:04 AM

    Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

    HTML、CSS、およびJavaScriptの未来:Web開発動向 HTML、CSS、およびJavaScriptの未来:Web開発動向 Apr 19, 2025 am 12:02 AM

    HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

    See all articles