@(css BFC)[IE hasLayout|Miaotong]
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。注意：hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。下文中的InternetExplorer都是指IE7、IE6及以下版本。
要素にレイアウトがある場合、その要素はそれ自体と、可能な子孫要素のサイズと位置を決定します。簡単に言えば、これは、要素がこの作業を行うために祖先要素に依存するのではなく、要素自体とそのコンテンツを維持するためにより多くの時間を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 「レイアウト要素」は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 IE の HTML 要素に haslayout があるかどうかは、IE Developer Toolbar で確認できます。IE Developer Toolbar では、通常、haslayout を持つ要素は「haslayout = -1」として表示されます。 「レイアウト」 IE では、hasLayout 属性を使用して、要素にレイアウトがあるかどうかを判断できます (object.currentStyle.hasLayout など)。
独自のコンテンツの整理を担当する要素にはデフォルトでレイアウトがあり、主に次の要素 (不完全なリスト) が含まれます:
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html
haslayout デバッグと問題の解決
IE で Web ページが異常な動作をする場合、 haslayout をアクティブにして、それが問題かどうかを確認してください。一般的な方法は、特定の要素の CSS にzoom:1を設定することです。ほとんどの場合、既存の環境に影響を与えることなく要素の haslayout を起動するため、Zoom:1 が使用されます。問題が解消されれば、基本的には haslayout が原因であると判断できます。その後、対応する CSS プロパティを設定することでこの問題を修正できます。最初に要素の幅/高さの属性を設定してから、他の属性を検討することをお勧めします。
IE6 以前のバージョンの場合、一般的な方法は Holly hack と呼ばれ、この要素の高さを 1% (height:1%;) に設定します。この要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。または、IE の条件付きコメントを使用します。
IE7 の場合、最良の方法は、要素の最小の高さを 0 (min-height:0;) に設定することです。
haslayout の問題によって引き起こされる一般的なバグ
IE6 以前のバージョンでのダブルマージンフローティングバグ
バグ修正: display:inline;
IE5-6/win の 3 ピクセルオフセットバグ
バグ修正: height:1%;
IE6 Peek-a -boo バグ
バグ修正: 高さ:1%;
IE6/7 マイナスマージン非表示バグ:
バグ修正: 親要素の hasLayout を削除するか、子要素に hasLayout を割り当てて位置 :relative; を追加します
方法haslayoutを有効にするには?
ほとんどの IE 表示エラーは、要素の haslayout 属性をアクティブにすることで修正できます。 cssのsize属性(幅/高さ)などを設定することで要素のhaslayoutを有効にし、「レイアウトを持つ」ようにすることができます。以下に示すように、次の CSS プロパティを設定するだけです。
Internet Explorer 7 には追加のプロパティがいくつかあります (完全なリストではありません):
この記事は、W3C CSS 2.1 仕様のビジュアル フォーマット モデルについて言及しています
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/CSS2/visuren.html#inline- level
http://www.w3.org/TR/CSS2/visuren.html#normal-flow
Box: CSSレイアウトの基本単位
BoxはCSSレイアウトのオブジェクトであり基本単位です。ページは多くのボックスで構成されています。要素のタイプと表示属性によって、このボックスのタイプが決まります。 さまざまなタイプのボックスがさまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。どのようなボックスがあるかを見てみましょう:
ブロックレベルのボックス: ブロック、リスト項目、テーブルの表示属性を持つ要素は、ブロックレベルのボックスを生成します。そして、ブロックの書式設定コンテキストに参加します。
inline-level box: inline、inline-block、および inline-table の表示属性を持つ要素は、インライン レベルのボックスを生成します。そして、インライン書式設定コンテキストに参加します。
実行ボックス: css3 でのみ利用可能です。今は説明しません。 http://www.w3.org/TR/css3-box/#run-in-boxes
Formatting context
Formatting contextは、W3C CSS2.1仕様における概念です。これはページ上のレンダリング領域であり、そのサブ要素がどのように配置されるか、および他の要素との関係や相互作用を決定する一連のレンダリング ルールがあります。最も一般的な書式設定コンテキストは、ブロック書式設定コンテキスト (略して BFC) とインライン書式設定コンテキスト (略して IFC) です。
CSS2.1ではBFCとIFCしかなく、CSS3ではGFCとFFCも追加されました。
BFC定義
BFC（Block formatting contexts）とは、直訳すると「ブロックレベルの書式設定コンテキスト」となります。これは、ブロックレベルボックスのみが参加する独立したレンダリング領域であり、内部のブロックレベルボックスがどのようにレイアウトされるかを規定し、この領域の外側とは何の関係もありません。
BFCレイアウトルール:
BFC をトリガーするにはどうすればよいですか?
今日はここまでで、明日の記事に続きます。間違いや不足があればご指摘ください、よろしくお願いします！ ----ミャオトン。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
