css float クリアフロート haslayout

1: float は、指定された要素を通常のドキュメント フローから切り離すことを可能にする特別なレイアウト機能です。これはブロックレベルの要素に適用する必要があります。つまり、float はインライン タグには適用されません。 float が適用されると、この要素はブロックレベル要素として指定されます。たとえば、インライン要素をフロートに設定した後、その幅と高さを設定できます。

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}

:after 擬似要素は要素の後にコンテンツを追加します。この擬似要素を使用すると、作成者は要素コンテンツの最後に生成されたコンテンツを挿入できます。デフォルトでは、この疑似要素はインライン要素ですが、display 属性を使用して変更できます。 after を使用して生成されるコンテンツは最初にスペースです。次に、レイアウトに影響を与えないように高さを 0 に設定します。これは、レイアウトに影響を与えないことを意味します。 clear: 両方とも、after をサポートしていないブラウザー ie6 と ie7 の場合は、height: 1% を追加するだけで問題ありません。この場合、ie6 と ie7 は haslayout を持ちます。

2: haslayput

実際、haslayout は Windows Internet Explorer 7 以前のレンダリング エンジンの内部コンポーネントです。

Internet Explorer 7 以前では、要素はサイズと構成を計算します。独自のコンテンツの、または親要素に依存してサイズを計算し、コンテンツを整理します。これら 2 つの異なる概念を調和させるために、レンダリング エンジンは、true または false の hasLayout 属性を使用します。要素の hasLayout 属性値が true の場合、その要素にはレイアウトがあると言います。要素にレイアウトがある場合、要素自体および子孫要素のサイズと位置を決定します。簡単に言うと、先祖の要素に頼って仕事をするのではなく。 IE は IE 開発者ツールバーから表示できます 次に、HTML要素にhaslayoutがあるかどうかですが、haslayoutのある要素は通常「haslayout = -1」と表示されます。

ここでの has レイアウトは、それ自体と可能な子孫要素のサイズを計算して配置し、親要素の高さを決定します。つまり、親要素は内部のコンテンツの高さに適応します。 height: 1% が追加されます。もちろん、幅などのレイアウトを持たせるために他の属性を追加することもできます。もちろん、float を追加することもできます (float はレイアウトをトリガーすることもできます)。float は別の float を生成するため、float を使用して float をクリアすることはお勧めしません。

100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d、f5d188ed2c074f8b944552db028f98a1a34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1c、 bb9345e55eb71822850ff156dfde57c8、221f08282418e2996498697df914ce4e、4750256ae76b6b9d804861d8f69e79d3、2b5469ab79cf842344327415c3b3bb95、e911751791aa3ba95dc724e2fb905976d5ba1642137c3f32f4f4493ae923989c、d8e2720730be5ddc9c2a3782839e8eb6、273238ce9338fbb04bee6997e5552b95、082dedeb30a00d0e6e2cdb74a392fac3次の CSS プロパティと値により、要素がレイアウトを取得できるようになります:

• position:Absolute
  絶対配置要素を含むブロックには、この点で問題が発生することがよくあります。

• float: left|right
  レイアウト要素の特性により、フローティング モデルは多くの奇妙な動作をします。

• display: inline-block
  これは、インラインレベルの要素にレイアウトが必要な場合によく使用されます。これは、要素にレイアウトを持たせるための、この CSS プロパティの唯一の効果でもあります。 IE では「インライン ブロック動作」が可能ですが、IE/Win: インライン ブロックと hasLayout では大きく異なります。

• width: "auto" を除く任意の値
  多くの人は、レイアウト関連の問題に遭遇したとき、通常、最初にこれを使用して問題を解決しようとします。

• 高さ: 「自動」を除く任意の値
  高さ: 1% Holly Hack で使用されます。

• zoom: 「通常」
  IE 固有のプロパティを除く任意の値。ただし、zoom:1 はデバッグのために一時的に使用できます。

• writing-mode: tb-rl
  MS 専用プロパティ。

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

• overflow-x|-y: hidden|scroll|auto
  overflow-x および overflow-y は、CSS3 ボックス モデルのプロパティですが、ブラウザーではまだ広くサポートされていません。以前のバージョンの IE ではレイアウトをトリガーする機能がありませんでした。

• さらに、いくつかの新しい haslayout アクターが IE7 画面に追加されました。hasLayout だけを考慮すると、min/max と width/height は同様に動作し、固定位置と絶対位置はまったく同じになります。

• position: 固定

• min-width: 任意の値
  0 に設定されていても、要素はレイアウトを取得できます。

• max-width: none以外の任意の値

• min-height: 任意の値
  0にしても要素のhaslayout=trueにすることができる

• max-height : 「none」を除く任意の値

インラインレベルの要素について

インライン要素の場合(span要素や表示: inlineなどの要素など、デフォルトでインラインにすることができます)

• 幅と高さのみがhasLayout inをトリガーしますIE5.x および IE6 以降の quirks モード。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。

• zoom はいつでも hasLayout をトリガーできますが、IE5.0 ではサポートされていません。

「layout」を持つ要素が inline も表示する場合、その動作は標準で言及されている inline-block と非常に似ています。通常のテキストと同様に、段落内で水平方向に連続して配置され、vertical- alignが影響し、コンテンツに応じてサイズを適応的に調整できます。これは、IE/Win だけでは、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。これは、他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるためです。レイアウトはインラインブロックになります。

hasLayout をリセット

他のプロパティが hasLayout に追加されていない場合、別のルールで次のプロパティをデフォルト値にリセットすると、hasLayout がリセット (または取り消し) されます:

• 幅、高さ ( "auto" に設定)

• max-width、max-height (「なし」に設定) (IE 7 の場合)

• 位置 (「静的」に設定)

• float (「なし」に設定)

• オーバーフロー (「表示」に設定) (IE 7 の場合)

• ズーム (「標準」に設定)

• writing-mode ("tb-rl"から"lr-t"に設定)

display属性の違い: haslayout=trueを"inline-block"で設定した場合、別ルールでもこの​​属性をオーバーライド「block」または「inline」に設定しても、haslayout フラグは false にリセットされません。

mid-width と middle-height をデフォルト値の「0」に設定しても、hasLayout には引き続き割り当てられます。 hasLayout

をリセットする属性「auto」が無効です。

以上がcss float クリアフロート haslayoutの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。