体験共有：CSSフローティング属性floatの詳細説明

上記の記事では、float の基本的なプロパティについて詳しく説明しました。float の使用方法について説明し、最も典型的なケースを共有しましょう。 [推奨読書: フロントエンド float の使用方法? float 属性の詳細な説明]

CSS スタイルでは、floating float が最適な属性です。float 属性は、コントロールのボックスです。 CSS では、ボックス内のコンテンツは右から左にフローティングできます。

ケース共有:

上の図では、2 つの div モジュールを定義しました。1 つは大きなモジュールで、もう 1 つは小さなモジュールです。便宜上、色を追加しました。区別しやすくするために、Web ページの背景色に色を追加すると同時に、div ごとに一定のマージンを設定します。

両方のモジュールで float が設定されている場合、div はブロックレベルの要素であるため、各要素は互いに独立しており、各ボックスは自由で上から下まで自由に配置されます。

1. 最初の div を float に設定します。

コードは次のとおりです:

#son1
{
    /*这里设置son1的浮动方式*/
    float:left;
}

上記のコードの分析:

ボックスは次のとおりです。左にフロートに設定すると、最初のボックスもフローティング要素になるため、最初のボックスの幅は拡張されなくなり、幅も最小幅になり、2 番目のボックスも最初のボックスに従います。

2. 2 番目のボックスを浮動小数点数に設定します。

#son2
{
    /*这里设置son2的浮动方式*/
    float:left;
}

上記のコードでは、2 番目のボックスは浮動要素となり、最初のボックスに隣接するため、幅は拡張されません。図に示すように:

しかし、多くの人は、なぜ最初のボックスと 2 番目のボックスの間に一定の距離があるのか​​不思議に思うでしょう。実際には CSS スタイルを使用しています。 、両方のボックスに外枠が設定されている場合、ボックス 1 がフローティング オブジェクトである場合、ボックス 2 にはフローティング要素がありません。これは、中央に一定の隙間が生じます。フローティングとして 要素によって決定されます。

上記は経験の共有です: CSS フローティング属性 float の詳細な紹介 Html5 チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

以上が体験共有：CSSフローティング属性floatの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。