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

CSSでfloatをクリアする方法

醉折花枝作酒筹

リリース： 2023-01-04 09:34:40

オリジナル

4646 人が閲覧しました

フローティングをクリアする方法: 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 サイトの他の関連記事を参照してください。