CSSのfloat属性を使ってフローティング要素を設定する方法の紹介

フローティング ボックスは、その外端が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。

フロートはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロックはフロートが存在しないかのように動作します。

フロートエフェクト表示
基本設定

Webページに通常通り3Pカラーブロックを追加します:

HTMLコード:

<p class="p1">
    p1   
</p>
<p class="p2">
    p2   
</p>
<p class="p3">
    p3   
</p>

いくつかのサイズと色を簡単に設定します:

CSSコード:

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
}

エフェクト以下の通りです:

通常、3つのpsは上から下にソートされます

次に、float属性を使用して値を適切に設定します

p1タグにfloat属性を追加します

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

その効果は次のとおりです:

p1 が画面の右側に走っていることがわかります。これは、右側に浮かせるパフォーマンスです。

同時に 3 つの p に float を設定します: left

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

効果は次のとおりです:

3 つの p をすべて左側に float に設定すると、この水平レイアウトを実現できます

修正 CSS コード (p1 の高さと p2 の幅) は次のとおりです:

.p1 {   
    width: 100px;   
    height: 130px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 300px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

効果表示:

p2 の幅が十分で、p3 を 1 行に配置できない場合、p3 は2 番目のライン開始レイアウトから自動的に開始されます。ただし、p1の高さが少し高いため、p3は最初からではなくp1の後ろから配置されます

オーバーフローを使用してfloatをクリアします
例:

.overflow-clear-float {overflow:hidden;}

or

overflow-clear-float {overflow:auto;}

overflow style値が非可視の場合、CSS 2.1 仕様で定義されたブロック フォーマット コンテキストが実際に作成されます。それを作成した要素は、正確な高さを取得するために内部要素の位置が再計算されます。このように、親コンテナにはフローティング要素の高さも含まれます。この用語はあまりにも曖昧であったため、CSS 3 ドラフトではルート フローという用語に変更されました。その名前が示すように、このレイアウト フローは独立しており、外部要素には影響しません。実際、この機能は初期の IE の hasLayout 機能に非常に似ています。
互換性の問題に関する注意:
ブロック フォーマット コンテキストの概念は、CSS 2.1 仕様内で提案されました。したがって、IE6/7 ではサポートされていません。これは、以前の IE バージョンでは CSS 1 仕様標準と CSS 2.0 仕様の一部のみが完全に実装されていたためです。 IE 7 では、オーバーフロー値が表示されないときに hasLayout 属性をトリガーできます。これにより、IE 7 ではコンテナーにフローティング要素を含めることもできます。

float 属性を使用して CSS でフローティング要素を設定する方法に関する関連記事については、PHP 中国語 Web サイトに注目してください。