フロートのクリアについての包括的な説明 (当時一緒にクリアしたフロートのネット抜粋)_html/css_WEB-ITnose

1. クリアフロートとクローズドフロート

いわゆるクリアフロートとは、表示が正しいことを意味します。フローティング要素を自動的にラップするドキュメント フローの機能を回避します (フッター部分に clear:both; 属性を設定するのが一般的です)

フロートを閉じると高さの崩壊の問題が実際に解決され、ラップ要素に高さが生まれます。 。浮動要素への疑わしいラップ。したがって、クローズドフローティングと呼ぶ方が適切です。

2. クローズドフロートの原理

フロートをクリアするには多くの一般的に使用される方法があり、2 つのカテゴリに分類できます

1. フローティング要素の最後に空の要素を追加し、clear:both 属性を設定します
2. 親要素は、overflow または display:table; を設定します

では、これを行う前に、hasLayout と Block の書式設定コンテキストを理解する必要があります。

いわゆるブロック書式設定コンテキストは、BFC と呼ばれるブロックレベルの書式設定コンテキストを指します。

では、BFC をトリガーするにはどうすればよいでしょうか?

float none 以外の値

overflowvisible 以外の値 (hidden、auto、scroll)

display (table-cell、table-caption、inline-block)

position (absolute) 、修正済み) )

fieldset 要素

display:table 自体は BFC を作成しませんが、匿名ボックスを生成し、匿名ボックス内の display:table-cell は新しい BFC を作成できることに注意してください。言い換えれば、ブロックレベルの書式設定コンテキストをトリガーするのは、display:table ではなく、匿名ボックスです。したがって、display:table と display:table-cell によって作成された BFC の効果は異なります。

現在、www.w3.org では、fieldset 要素にはこのトリガー動作に関する情報がなく、HTML5 標準になるまで表示されません。一部のブラウザのバグ (Webkit、Mozilla) では、このトリガー動作について言及していますが、公式声明はありません。実際、フィールドセットはほとんどのブラウザで新しいブロックレベルの書式設定コンテキストを作成できますが、開発者はこれを当然のことと考えるべきではありません。 CSS 2.1 では、フォーム コントロールに適用されるプロパティや、CSS を使用してフォーム コントロールのスタイルを設定する方法は定義されていません。ユーザー エージェントは CSS プロパティをこれらのプロパティに適用できます。開発者は、このサポートを実験的なものとして考慮することをお勧めします。CSS の今後のバージョンではさらに標準化される可能性があります。

BFC の機能:

1) ブロック レベルの書式設定コンテキストにより、マージンの重なりが防止されます

2 つの隣接するブロック ボックスが同じブロック レベルの書式設定コンテキスト内にある場合、それらの間の垂直マージンの距離は重なり合います。つまり、隣接する 2 つのブロック ボックスが同じブロック レベルの書式設定コンテキストに属していない場合、それらの余白は重なりません。

2) ブロックレベルの書式設定コンテキストはフローティング要素と重なりません

規制に従って、ブロックレベルの書式設定コンテキストの境界線は、その内部の要素のマージンと重なり合うことはできません。これは、ブラウザーがブロック レベルの書式設定コンテキストに対して暗黙的なマージンを作成し、フローティング要素のマージンと重ならないようにすることを意味します。このため、float の隣のブロック レベルの書式設定コンテキストに負のマージンを追加しても機能しません (Webkit と IE6 にはこれに関する問題があります。このテスト ケースを参照してください)。

3) ブロックレベルの書式設定コンテキストには、通常、float を含めることができます

詳細については、次を参照してください: W3C CSS2.1 - 10.6.7 ブロック書式設定コンテキスト ルートの「自動」高さ

わかりやすく言うと、BFC を作成した要素独立したボックスでは、内部の子要素は外部要素のレイアウトに影響を与えません。また、その逆も同様で、BFC はドキュメント内の通常のフローに属します。

この時点で、overflow:hidden または auto が閉じられてフローティングされる理由が理解できたかもしれません。これは、親要素が新しい BFC を作成するためです。 Zhang Xinxu の記事「オーバーフローとズーム「クリア フロート」についての理解」については、厳密さが不十分であり、パッケージを使用してクローズド フロートの原理を説明する根拠がないと思います。 「Firefox などのブラウザには haslayout の概念がない」と言われていますが、最近のブラウザには BFC があり、パフォーマンスの点では hasLayout は BFC と同等になります。

IE6〜7の表示エンジンはレイアウトと呼ばれる内部概念を使用しているため、この表示エンジン自体に多くの欠陥があり、IE6〜7の多くの表示バグに直結します。要素が「レイアウトを取得する」、または要素が「レイアウトを所有する」と言うときは、その Microsoft 独自のプロパティ hasLayout http://msdn.microsoft.com/worksh... rties/haslayout .asp が次のように設定されていることを意味します。この目的に関しては真実です。 IE6-7 は、レイアウトの概念を使用して要素のサイズと位置を制御します。レイアウトを持つ要素は、それ自体とその子要素のサイズと位置を制御します。要素の hasLayout が false の場合、そのサイズと位置は、レイアウトを持つ最も近い祖先要素によって制御されます。

hasLayout をトリガーするための条件:

position: 絶対

float: left|right

display: inline-block

width: "auto" 以外の任意の値

height: "auto" 以外の任意の値 (多くの人など) float をクリアすると、高さを使用: 1%)

zoom: "normal" 以外の任意の値 (MSDN) http://msdn.microsoft.com/worksh...properties/zoom.asp

writing-mode: tb-rl ( MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp

IE7 では、オーバーフローもレイアウト トリガーになりました:

overflow: hidden|scroll |auto (この属性には以前のバージョンの IE では、レイアウトをトリガーする機能がありました。)

overflow-x|-y: hidden|scroll|auto (CSS3 ボックス モデルの属性は、ブラウザーによってまだ広くサポートされていません。それらは、以前の IE バージョンのトリガー レイアウト)

IE8 は、hasLayout 属性を使用しないと言われている新しい表示エンジンを使用しており、多くの嫌われているバグを解決しています。

要約:

BFC (IE8+、firefox、chrome、safari) をサポートするブラウザーでは、新しい BFC を作成してフロートを閉じます。

BFC をサポートしないブラウザー (IE6-7) では、hasLayout Closed をトリガーします。浮く。

3. クローズド フローティング メソッド?? 改善を続ける

3 番目のセクションで分析した原理を通じて、クローズド フローティングの 7 つのメソッドがリストされていることがわかりました。 :display:Table-cell、display:inline-block およびその他の属性値は、BFC がトリガーされている限り、クローズおよびフローティングにすることができます。あらゆる面から比較すると、疑似要素後のクローズドフローティングが比較的優れた解決策であることは間違いありません。以下でこの方法について詳しく説明します。

.clearfix:after {content:"."; 表示:hidden; clear:both; }

.clearfix { *zoom:1;要素はブロックレベルの要素として表示され、残りのスペースを占有します。

2) height:0 は、元のレイアウトの高さを破壊するコンテンツの生成を回避します。

3) Visibility:hidden は、生成されたコンテンツを非表示にし、生成されたコンテンツによってカバーされるコンテンツをクリック可能にしてインタラクティブにすることができます。たとえば、oocss には「XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX」という従来のコンテンツがありますが、Firefox 7.0 まではこれは推奨されません。ギャップ;

5) ズーム: 1 は IE hasLayout をトリガーします。

分析の結果、clear: を除いて、どちらも float をクリアするために使用され、他のコードは content によって生成されたコンテンツを非表示にするだけであることがわかりました。これが、closed float の他のバージョンが font-size: 0、line-height: を持つ理由です。 0.

優れた計画 1:

空のラベルのクローズドフローティングメソッドのコードと比較すると、少し冗長であるように見えます。クエリを通じて、Unicode 文字に「ゼロ幅のスペース」があることがわかりました。は U+200B、文字そのものです。非表示なので完全に省略できます。{content:"200B"; clear:both; { *zoom:1 ; }.

優れた解決策 2:

Nicolas Gallagher によって提案、原文: 新しいマイクロ クリアフィックス ハック、この方法には Firefox のギャップの問題はありません。

/* 最新のブラウザの場合 */

.cf:before,.cf:after { content:"";

display:table;

}

.cf:after { clear:both }/ * IE 6/7 の場合 (trigger hasLayout) */

.cf {zoom:1; }

上記のメソッドでは、疑似要素の前に : が使用されていることに注意してください。これについては、いつ使用する必要がありますか?なぜ選択肢 1 がないのでしょうか?実際、これはマージンのオーバーラップを処理するために使用されます。内部要素の float は BFC を作成するため、内部要素のマージン上部と前のボックスのマージン下部がオーバーラップします。これが望ましくない場合は、単純な閉じたフロートの場合は、after を追加できます。 Da Mo が記事「Clear Float」で述べたこととは異なります。ただし、clearfix:after のみを使用すると、ブラウザ間の互換性において垂直マージン オーバーレイのバグが発生します。これはバグではなく、BFC がすべき機能です。持っている。

エレガントなデモをご覧ください

詳細については、「Clearfix の改善とオーバーフロー:hidden 詳細な説明 [翻訳]」を参照してください

実際の開発では、Unicode 文字が存在するため、改善案 1 は CSS が埋め込まれた GB2312 でエンコードされたページには適していません。改善案 2 は、さらなる実践をお待ちしています。スキーム 3 と 4 は、オーバーフローを通じてフロートを閉じます。これにより、実際には新しいブロック レベルの書式設定コンテキストが作成され、フロートに対するレイアウトと動作に一連の変更が生じます。フロートのクリアは、一連の変更の 1 つにすぎません。単なる関数です。したがって、フロートを閉じるためにグローバル特性を変更することは賢明ではありません。リスクとしては、Firefox の初期バージョンでのフォーカス、絶対位置のレイヤーの切り捨てなどです。フロートを閉じる必要があるだけの場合は、一部の記事にあるように「注意して使用する」のではなく、オーバーフローを使用すべきではないことを常に理解してください。

この記事を書くのに3日かかりました。この記事が役に立ったと思われる場合は、あなたのメッセージが私にとって最大のサポートです。同時に、エネルギーが限られているため、記事内の間違いや欠陥を指摘して私たちを励ましてください。

参考資料:

改ページとブロック書式コンテキスト: 許可された改ページ (13.3.3)

Clearfix とブロック書式コンテキスト: Clearfix について知っていることはすべて間違っています

ブロック書式コンテキスト、” hasLayout ” ? IE ウィンドウと CSS2.1 ブラウザ: シミュレーション。

float の隣に新しいブロック フォーマット コンテキスト

レイアウトを持つことについて、[翻訳] レイアウトを持つことについて http://old9.blogsome. com /2006/04/11/onhavinglayout

「HasLayout」の概要

hasLayout プロパティ

IE hasLayout

https://developer.mozilla.org/en/CSS/block_formatting_context

転載元：http :// /www.iyunlu.com/view/css-xhtml/55.html