再版クリア float_html/css_WEB-ITnose-htmlチュートリアル-php.cn

再版クリア float_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:25:27

オリジナル

1051 人が閲覧しました

要約すると:

{clear:both;} Clear 属性が設定された要素の場合、上境界線の位置はフローティング要素のマージンと下境界線の位置の近くに描画されるため、フローティング要素の高さは浮動要素を含むコンテナは正常です。したがって、コンテナ内で浮動要素の後ろに非浮動要素がある場合、または新しい空の要素が追加された場合に適用できます。
.after-clear-float :after{content:""; display:block; clear:both;} 原理は上記と同じなので、これのみが適用されます。親コンテナの子要素の最後のレベルに接続されます。これは浮動要素です。つまり、浮動要素の背後に親コンテナから分離する非浮動要素はありません。 IE6/7 は :after 疑似要素をサポートしていないだけです。
{overflow:hidden;} または overflow:auto; は、非 visilbe のオーバーフロースタイル値を持つ要素を作成します。これにより、実際には CSS 2.1 仕様で定義されたブロックフォーマットコンテキストが作成され、その内部要素の位置が再計算されます。正確な高さを取得します。このように、親コンテナにはフローティング要素の高さも含まれます。この用語はあまりにも曖昧であったため、CSS 3 ドラフトではルートフローという用語に変更されました。その名前が示すように、このレイアウトフローは独立しており、外部要素には影響しません。テスト時に、子要素に浮動要素と非浮動要素が同時に混在していると、効果が良くありません。 IE6/7ではサポートされません。
{display:table} または {display:table-cell} 要素の表示値が table または table-cell に設定されている場合、CSS 2.1 仕様で定義されているブロックフォーマットコンテキストも作成されます。このように、親コンテナにはフローティング要素の高さも含まれます。 IE6/7ではサポートされません。
テーブル要素を浮動要素コンテナとして使用します。 td にフローティング要素を配置すると、フローティングの問題は発生せず、互換性の問題も発生しません。 TABLE TD TH などの TABLE シリーズタグを使用する場合、要素の表示値は実際には display: table シリーズになります。これにより、CSS 2.1 仕様で定義されたブロックフォーマットコンテキストも作成されます。このように、親コンテナにはフローティング要素の高さも含まれます。同時に、IE 6/7 では、TABLE TD TH などの TABLE シリーズのタグには当然 haslayout 機能が備わっています。
浮動親要素。この方法には互換性の問題はありませんが、実際の使用は推奨されません。ページ上にフローティング要素が 1 つある限り、このメソッドを使用してフローティング要素をクリーンアップすると、必然的にページ上のすべての要素がフローティングになり、目的の効果が得られることが容易に推測できるためです。
トリガーには Layout があります。以下は原文のこの部分です:

サンプル:

haslayout-clear-float:{width:1px}或.haslayout-clear-float:{height:1px}或.haslayout-clear-float:{zoom:1}

ログイン後にコピー

「レイアウト」は、要素がそのコンテンツの位置とサイズをどのように決定するか、および他の要素との関係と相互作用を決定する IE 独自の概念です。そしてアプリケーションとユーザーへの影響。

「レイアウト」は特定の CSS プロパティによって不可逆的にトリガーされる可能性があり、一部の HTML 要素自体にレイアウトがあります。

'Layout' IE では、hasLayout 属性を使用して、要素にレイアウト (object.currentStyle.hasLayout など) があるかどうかを判断できます。

「レイアウト」は、IE ブラウザーレンダリングエンジンの内部コンポーネントです。 Internet Explorer では、要素は独自のコンテンツを編成してサイズを計算するか、包含ブロックに依存してコンテンツのサイズとサイズを計算します。これら 2 つのメソッド間の矛盾を調整するために、レンダリングエンジンは、true または false の「hasLayout」属性を使用します。要素の 'hasLayout' 属性値が true の場合、要素にはレイアウト (レイアウト) がある、またはレイアウトがあると言います。

デフォルトでレイアウトを持つ要素:

<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>

ログイン後にコピー

hasLayoutをトリガーできるCSSプロパティ:

display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)

ログイン後にコピー

IE7には、hasLayoutをトリガーできるいくつかの追加属性(不完全なリスト)もあります:

min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed

ログイン後にコピー

IE6の以前のバージョン(IE6以降も含む)混合モードのすべてのバージョン (実際、この混合モードはレンダリングに関しては IE 5.5 と同等です)、hasLayout は任意の要素の「幅」または「高さ」(非自動) を設定することでトリガーできますが、標準に準拠しています。 IE6 と IE7 のモードただし、のインライン要素では機能しません。「display:inline-block」を設定する必要があります。

互換性の問題に関する注意:
レイアウト機能は IE でのみサポートされており、他のブラウザにはこの機能がありません。計算されたレイアウトに依存してフロートをクリーンアップできる haslayout 機能は、IE 6/7 にのみ存在します。IE8 は、CSS 2.1 のブロックフォーマットコンテキスト定義を使用して同じ効果を実現します。

注: IE hasLayout 機能の製造元の説明リンク: hasLayout プロパティ

上記の内容は、一般的なクリアフロートメソッドが有効になるための仕様 (およびブラウザの製造元の機能) の原則です。ページ開発者が実際のプロジェクトの目標を達成するために、互換性機能と実際の状況に基づいて組み合わせを使用することを願っています。