CSS 詳細レビューノート --floating_html/css_WEB-ITnose

フォント、背景、その他すべてのプロパティの変更に加えて、CSS は基本的なレイアウト タスクも実行できます。

div+css は、フローティング、位置決め、ボックス モデル、その他の技術的アプリケーションを通じて最も一般的に使用されるレイアウト方法です。

配置の基本的な考え方はシンプルで、通常の位置、または親要素、別の要素、またはブラウザ ウィンドウ自体を基準にして要素ボックスを表示する場所を定義できます。

一方、css1 は float を提案します。フローティングは正確な位置決めではありませんが、通常のフロー レイアウトではないことは確かです。

Floating

を宣言すると、画像が右にフローティングされ、他のコンテンツ (テキスト) が画像を「回り込む」ことができます。 。 CSS では、画像から段落、リストに至るまで、あらゆる要素をフロート表示できます。すべての要素は、float 属性を使用してフローティングできます。

したがって、上記のコードは のように書くこともできます。

浮動要素

浮動要素に関しては、覚えておくべきことがいくつかあります。まず、フローティング要素が何らかの方法でドキュメントの通常のフローから削除され、レイアウトに影響を与えます。要素がフローティングされると、他のコンテンツがその要素の周りを「包み込み」ます。

フローティング要素の周囲のマージンはマージされないことに注意してください。画像を 20 ピクセルのマージンでフローティングすると、画像内には少なくとも 20 ピクセルのスペースが残ります。他の要素がこのイメージを囲み、それらすべてにマージンがある場合、それらのマージンはフローティング イメージのマージンとマージされません。

本当に非置換要素をフロートさせたい場合は、要素の幅を宣言する必要があります。そうしないと、フローティングされた段落の幅が 1 文字だけになる可能性があります。

Float ではありません

float 属性には left と right に加えて値もあります。 float:none は、要素がフローティングになるのを防ぐために使用されます。要素を非浮動にしたい場合は、float を宣言すべきではないと思うかもしれません。実際、通常の非浮動要素を取得するには、この値が必要です。そうしないと、すべての要素が何らかの方法で浮動になります。

フロートの詳細

フロートの詳細に入る前に、まずブロックを含むという概念を確立する必要があります。 float 要素を含むブロックは、最も近いブロック レベルの祖先です。したがって、次のマークアップでは、フロート要素を含むブロックは、フロートを含む段落要素です。

<h1>Test</h1> <p><img src ="U54.jpg" style ="float:right;border:1px solid #000"> This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph. </p>

さらに、フロート要素は、要素自体に関係なく、ブロックレベルのボックスを生成します。 float の場合、リンク自体がインライン要素であっても、通常はインライン ボックスが生成されますが、フローティングである限り、ブロック レベルのボックスが生成されます。 ルール:

1) の左右の境界。浮動要素は、その要素を含むブロック境界の左右の境界を超えることはできません。 (ただし、負のマージンを設定したり、浮動要素を親要素よりも広く設定すると、親要素の外側に表示されます。)

2) 浮動要素の左右の外側の境界は、以前に表示されていた左の浮動 (または右) である必要があります。ソースドキュメントの Float) 要素には、後から発生する浮動要素の上部が、先に発生する浮動要素の底部よりも下にない限り、(左) 境界線があります。

フローティング コンテンツはすべて表示され、あるフローティング要素が別のフローティング要素と重なることを心配する必要はありません。位置決めを使用する場合は状況がまったく異なり、要素が互いに重なってしまう可能性があります。

3) 左フロート要素の右境界線は、右フロート要素の左外側境界線の右側にはなりません。右フローティング要素の左外端は、左フロート要素の右外端の左側にはなりません。

4) フローティング要素の上部は、親要素の上部よりも高くすることはできません。フローティング要素がマージされた 2 つのマージンの間にある場合、フローティング要素は 2 つの要素の間にブロックレベルの親要素があるかのように配置されます。

これにより、フローティング段落が 3 つの段落に共通する親要素の先頭まで移動することがなくなります。

5) 浮動要素の上部は、以前のすべての浮動要素またはブロックレベル要素の上部よりも高くすることはできません。

6) フローティング要素がソースドキュメント内の別の要素の前に表示される場合、フローティング要素の上部は、その要素によって生成されたボックスを含む行ボックスの上部より高くてはなりません。

7) 左 (または右) の浮動要素の左 (右) に別の浮動要素があり、前者の右の外側の境界を、その要素を含む要素の (左) の境界の右 (左) に置くことはできません。ブロック。

8) フローティング要素は、できるだけ高い位置と低い位置に配置する必要があります。

9) 左側の浮動要素はできるだけ左側に配置し、右側の浮動要素はできるだけ右側に配置する必要があります。位置が高くなるほど、右または左に移動します。

実践的な動作

段落 1 に左のフローティング画像を挿入します:

このように見ると、フローティング要素が左の要素の下部を超えて伸びていますが、それは明白ではありません。前に説明したフローティング ルールは、Lelo フロート要素とその親要素の左右と上の境界のみを扱いますが、下の境界は扱いません。

CSS2.1 は、float 要素の動作の 1 つの側面を明確にしています。float 要素は、その子孫の float 要素をすべて含むように拡張されます。

画像の左余白を 10 ピクセルに設定し、テスト タイトルの背景と境界線を追加します。

フローティング要素はフローの内側と外側の両方にあるため、これは間違いなく発生します。タイトルの内容はフローティング要素によって「表示」されますが、タイトル要素の幅は親要素と同じままです。フローティング要素の下に隠れることを避けるために、特定のコンテンツはコンテンツ領域の左端からは表示されません。

Clear

フローティング要素を介してコンテンツが常に流れることを望まない場合もあり、場合によっては、特にこの動作を避けたい場合もあります。この場合、セクションの最初の要素を設定して、その隣にフロート要素が表示されないようにします。最初の要素がフロートの隣に配置されている場合、その要素はその下に子フロートが表示されるまで押し下げられ、後続のすべてのコンテンツはその背後に表示されます。

これは、clear 属性を使用して実行できます。

タイトル「Test」に属性 clear:left を追加します

HTML の
と同様に、h3 要素の左側にフローティング要素が表示されるのを防ぎ、h3 をすべて押し出します。ただし、浮動要素は h3 の右側に出現することもできます。