CSSでfloatをクリアする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでfloatをクリアする方法

醉折花枝作酒筹

Apr 06, 2021 pm 06:16 PM

css浮くクリアフロート

フローティングをクリアする方法: 1. 構文「height: height」を使用して親 div で高さを定義します; 2. 最後に空の div を追加し、「clear: Both」スタイルを設定します; 3. 定義します親 div の擬似クラス「:after」とズーム; 4. 親 div は「overflow:hidden」を定義します。

CSSでfloatをクリアする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

フローティングを使用すると、現在のラベルが上向きに浮動し、前後のラベルの位置、親ラベル、および幅高さ属性にも影響します。

また、同じコードでもブラウザによって表示が異なる場合があり、フロートのクリアがより困難になります。

フローティングによって引き起こされる問題を解決する方法はたくさんありますが、一部の方法ではブラウザの互換性の問題が依然として発生します。

1. 親 div の高さの定義

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解决代码*/
    height:200px;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
    width:98%
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
    .rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
</style>
</head>
    <body>
        <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        </div>
        <div class="div2">div2</div>
    </body>
    </html>

原則: 親 div の高さを手動で定義して問題を解決します。問題親 div は高さを自動的に取得できません。

利点: シンプル、コードが少なく、マスターしやすい

欠点: 固定高さのレイアウトにのみ適しており、正確な高さを指定する必要があります。高さが親 div と異なる場合、問題が発生します。

2. 空の div タグを最後に追加します。clear:both

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮动代码*/
.clearfloat{
    clear:both
}
</style>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>    
    <div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

原則: 空の div を追加し、CSS によって改良された clear:both を使用してクリアします。 float を使用し、親 div が高さを自動的に取得できるようにします。

利点: シンプル、コードが少なく、ブラウザのサポートが優れており、奇妙な問題が発生しにくい

欠点: 多くの初心者は原理を理解していません。ページに多くのフローティングレイアウトがある場合、多くの空の div を追加する必要があり、人々は非常に不快に感じます

#3. 親 div 定義疑似クラス: after およびzoom

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮动代码*/
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{
    zoom:1
}
</style>

<div class="div1 clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原則: IE8 以降および IE 以外のブラウザは :after のみをサポートします。原則は方法 2 に似ています。Zoom (IE 転送には属性があります) を使用すると、ie6 および ie7 のフローティング問題を解決できます。

利点: このブラウザはサポートが充実しており、奇妙な問題が発生しにくい (現在: Tencent、NetEase、Sina などの大規模な Web サイトで使用されています)

欠点:コードが多く、多くの初心者は原理を理解していません。主流のブラウザでサポートするには、2 行のコードを組み合わせて使用する必要があります。

4. 親 div 定義のオーバーフロー:hidden

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解决代码*/
    width:98%;
    overflow:hidden
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
    width:98%
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}

</style>

<div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原則: 幅またはズーム: 1 を定義する必要があり、高さは定義できません。

オーバーフローを使用してください:非表示 、ブラウザはフローティングエリアの高さを自動的にチェックします

利点: シンプル、コードが少ない、優れたブラウザサポート

欠点: 位置と組み合わせて使用することはできません。サイズを超えた部分は非表示になります。

学習ビデオ共有:

css ビデオチュートリアル

以上がCSSでfloatをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

毎週のプラットフォームニュース：遅い接続でUXの改善、ALTテキストを書くためのヒント、HTMLロード属性のポリフィルApr 17, 2025 am 11:09 AM

今週のラウンドアップ、ゆっくりとした接続の決定方法、画像のためにALTテキストに入れるもの、およびHTMLロード属性の新しいポリフィル、

少しポップを追加するための再利用可能なポップオーバーApr 17, 2025 am 11:02 AM

ポップオーバーは、ユーザーがコントロールボタンまたは定義された領域内でクリックすると、画面上のコンテンツの上に表示される一時的なビューです。例えば、

実際のアンダーラインとのスタイリングリンクApr 17, 2025 am 10:57 AM

アンダーラインのスタイル方法に来る前に、質問に答える必要があります。アンダーラインする必要がありますか？

毎週のプラットフォームニュース：HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

GraphQlを使用したマルチプレイヤーTic Tac ToeApr 17, 2025 am 10:54 AM

GraphQLは、フロントエンド開発者にとって非常に力を与えているAPIのクエリ言語です。 GraphQLサイトが説明しているように、あなたはあなたのデータを説明し、何を尋ねます

CSS変数を使用した論理操作Apr 17, 2025 am 10:44 AM

非常に頻繁に、スイッチ変数（0または1のいずれかの変数を使用している間、この投稿でより詳細に説明した概念）を使用してください。

怠zyなロード埋め込みYouTubeビデオApr 17, 2025 am 10:40 AM

これは、アーサー・コレンザンを介した非常に賢いアイデアです。デフォルトのYouTube埋め込みを使用するのではなく、ユーザーが再生するかどうかをページにリソースのがらくたを追加します

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

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

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、