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

CSS では、float 属性を使用して float を設定できます。構文は「selector {float:left|right|none}」です。要素は float 属性の値に応じて左または右に移動します。外側の境界線が親要素の内側の境界線、または別のフローティング要素の外側の境界線に触れるまで、周囲の要素も再配置されます。

CSSでfloatを設定する方法

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

CSS では、float 属性を使用して float を設定できます。

float 属性は、要素がどの方向に浮くかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。

基本構文形式:

选择器{float:属性值;}

ログイン後にコピー

左の要素は左に移動します
右の要素は右に移動します
none 要素はフロートされていません

css フローティングは、要素を通常の標準フロー制御から外して要素を移動させる方法です。その周囲の左または右の要素も再配置されます。

フローティングは、ページ上のオブジェクトが前後に流れる順序を変更できる、非常に便利なレイアウト方法です。これの利点は、コンテンツのレイアウトがシンプルになり、拡張性が高いことです。

フローティングは CSS レイアウトの非常に強力なレイアウト機能であり、CSS レイアウトを理解する上で重要な問題でもありますが、CSS では div を含むあらゆる要素をフローティング表示することができます。

フローティングを使用すると、フローティング属性が設定された要素が標準の通常のフローの制御から離脱して、親要素内の指定された位置に移動できます。

フローティングの性質

フローティングは、CSS のレイアウトに最もよく使用される属性です。

これで 2 つの div ができ、それぞれ幅と高さを設定します。これらの効果は次のとおりであることがわかっています。

現時点では、これら 2 つの div に float: left;## などの float 属性を追加すると、 #、効果は次のとおりです。

#これにより、フローティング効果が得られます。このとき、2 つの要素は並んでおり、両方の要素で幅と高さを設定できます (これは、前段落の標準的なフローでは実現できません)。

フローティングを上手に学びたいなら、3 つの性質を知る必要があります。次にそれについて話しましょう。

プロパティ 1: フローティング要素は標準外です

標準外とは、標準フロー外であることを意味します。いくつかの例を見てみましょう。

証拠 1:

上の図では、デフォルトで 2 つの div タグが上下に配置されています。 float 属性により、上の図の最初の

タグは浮いているように見えるため、このタグは別のレベルに配置されます。 2 番目の

も、独自のレベルの標準フローに従って配置されます。

証拠2:

上図において、spanタグは標準フローでは幅と高さを設定できません(インライン要素のため) ）。ただし、float に設定すると、ブロックレベルの要素に変換しなくても幅と高さを設定できます。

したがって、これは 1 つのことを証明できます:

要素をフローティングにすると、横に並べることができ、幅と高さを設定できるようになります。それが div であっても、span であっても構いません。 すべてのタグは、フローティング後はインラインレベルとブロックレベルを区別しなくなります。

プロパティ 2: 浮動要素は互いに近接しています

理解するために例を見てみましょう。

3 つすべての div に

float:left; 属性を設定した後、幅と高さを設定します。ブラウザウィンドウのサイズを変更すると、div のスナップ効果が確認できます。

上の図は、3 番に十分なスペースがある場合、 2位に近いでしょう。スペースが足りない場合は兄貴1号に寄りかかります。

兄弟 1 号にもたれるのに十分なスペースがない場合、3 号は一人で左側の壁にくっつきます。

ただし、3 号が単独で壁に張り付いている場合は、次のことに注意してください。

上の図は、3 号が左側の壁に張り付いている場合を示しています。、彼は行きません 1 中は混雑しています。

同様に、float にも

right という属性値があり、これは left の属性値と対称です。

プロパティ 3: フローティング要素には「単語の周囲」効果がある

画像を見れば理解できるでしょう。 div をフロートにし、p をフロートにしないようにします。

上の図では、div は p をブロックしますが、p 内のテキスト はブロックせず、「単語の周囲」効果を形成していることがわかりました。

概要: 標準ストリーム内のテキストは、フローティングボックスによって隠されません。（言葉は水のようなもの）

浮遊については、一点だけ強調しておかなければなりませんが、混乱を避けるために、初期段階では次の原則に従う必要があります: 単独で浮遊するものではありません。みんなで浮いて、浮いて、みんなで浮いて。

プロパティ 4: 縮小

Shrink: 幅が設定されていない場合、浮動要素はコンテンツの幅に自動的に縮小します (これはインライン要素と非常に似ています)。

例:

上の図では、div 自体がブロックレベルの要素です。幅が設定されていない場合、それは全体を占めます。行のみですが、設定すると div をフローティングすると縮小します

フローティング補足 (Web サイト作成時に注意)

上の図では、para1 と para2 を float に設定します。これらは div の子です。このとき、para1 para2の幅はdivの幅よりも小さくなります。効果は上の写真に示されています。ただし、para1 と para2 の幅が div の幅より大きく設定されている場合、para2 が次のようになります: