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

推奨事項

ホームページ

ウェブフロントエンド

htmlチュートリアル

再版クリア float_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

要約すると:

{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 プロパティ

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

推奨事項

初心者向けに、浮遊要素をクリーンアップする次の方法のいずれかを推奨します。これらの方法は比較的シンプルで信頼性があります:

HTML タグと CSS の clear 属性を使用して、フロートを手動でクリーンアップします。

要素の overflow:hidden または overflow:auto 値を設定すると、IE6 の haslayout 機能をトリガーするようにzoom:1 スタイルを設定できます。すべてのブラウザのフローティング目的のクリーニングとの互換性を実現します。

疑似要素: after を使用すると、zoom:1 スタイルを設定して IE6/7 の haslayout 機能をトリガーし、すべてのブラウザーと互換性のあるフロートをクリーンアップするという目的を達成できます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7694

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。