再版クリア 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  alt="再版クリア float_html/css_WEB-ITnose" ><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 までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

メモ帳++7.3.1

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

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。