フロートをクリアする方法にはどのようなものがありますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

フロートをクリアする方法にはどのようなものがありますか?

清浅

Dec 13, 2018 pm 03:21 PM

float

float をクリアする方法には、clearboth、clearfix の設定、オーバーフロー、親要素への二重疑似要素の設定などがあります。

コードを書くとき、float 要素の使用が原因で、、ページ上の一部の要素が正しく表示されない場合は、次の記事でフロートをクリアするいくつかの方法を詳しく紹介しますので、ある程度の参考になると思います。

【おすすめコース：CSSコース】

##Floating Consequences :

(1) フローティング要素はドキュメントフローの外にあるため、親要素の高さを拡張できず、親要素と同じレベルの要素に影響します

(2)フローティング要素はドキュメントフローから外れ、元の位置を占めないため、フローティング要素と同じレベルにある非フローティング要素がそれに続きます。
(3) フローティング要素が最初のフローティング要素でない場合、その前の要素も float にする必要があります。そうしないと、ページの構造表示に影響しやすくなります。

例: 1 つの div に 3 つの div を設定し、3 つの div で親要素を展開させます

<style>
    .box{border:1px solid #ccc;background:pink;}
    .red{width:100px;height:100px;background: red;}
    .green{width:100px;height:100px;background:green;}
    .blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

レンダリング:

フロートをクリアする方法にはどのようなものがありますか?

float:left を追加した後、親要素を開けなくなります

フロートをクリアする方法にはどのようなものがありますか?

方法フロートをクリアします

(1) フロートをクリアするには、clear:both を使用します
#コードに空の div タグを入れて、clear を設定します:both をこのタグに追加して、ページ上のフロートの影響をクリアします。シンプルさ、利便性、互換性の高さが利点ですが、構造上の混乱を引き起こし、後のメンテナンスに役立たないため、この方法の使用は一般的に推奨されません。

<div style="clear: both"></div>

(2) 疑似要素を使用するFloatをクリアするclearfix

親要素に:after疑似要素を追加します。疑似要素のfloatをクリアすることで、親要素の高さをサポートするという目的を達成します。

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

(3) オーバーフローメソッドの使用

親要素にオーバーフロースタイルが設定されている場合、overflow:hidden または overflow:auto のどちらでもフロートをクリアできます。値が表示されない限り、その本質は BFC を構築することです。これにより、親要素の高さをサポートする効果が得られます。

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(4) 二重擬似要素メソッドの使用

親要素を与えることで、float をクリアする効果を実現するために二重の疑似要素を設定します。

 .clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}

要約: 以上がこの記事の全内容です。この記事を読めば誰でもフロートをクリアする方法が理解できます

以上がフロートをクリアする方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM

子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：

アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります：

See all articles

ホットAIツール

ホットツール

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

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。