css float クリアフロート haslayout-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css float クリアフロート haslayout

巴扎黑

Jun 28, 2017 am 10:38 AM

float

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 をクリアすることはお勧めしません。

、