現代の Web デザインでは、プロパティは フロートほぼすべてのステップで使用されます。 しかし、これほど普及しているにもかかわらず、フローティング ブロックのメカニズム、その動作、およびその使用がどのような影響を与えるかを誰もが理解しているわけではありません。

「フロート」とは何ですか？

フロートこれは CSS の位​​置決めプロパティです。 その本質と起源を理解するには、印刷されたデザインに注目する必要があります。 印刷レイアウトでは、画像の周りにテキストが流れるように画像が配置されることがあります。 これは通常「」と呼ばれます テキストの折り返し".

ページ レイアウトでは、テキストを含むブロックを指定して使用できます。 画像の周囲にテキストを折り返すまたはラッピングを無視します。 テキストの折り返しを無視すると、単語が画像上に存在しないかのように流れるようになります。 これにより、画像がページ上のフローの一部であるかどうかが異なります。 Web デザインでは、すべてが非常に似ています。

Web デザインにおいて、CSS プロパティが適用された要素 フロート印刷レイアウトでテキストが回り込んだ画像のように動作します。 フローティング要素は Web ページのフローの一部として残ります。 これは、印刷レイアウトでテキスト ブロックが画像の折り返しを無視するように指示されているかのように、フローから削除される絶対配置要素とはまったく異なります。 絶対に配置された要素は他の要素の配置に影響を与えず、他の要素はその配置に影響を与えません。

プロパティの設定 フロート要素の場合 CSSを使用する次のようになります:

#サイドバー (float: right; )

プロパティには 4 つの有効な値があります フロート - 左, 右, なし, 継承する。 最初の 2 つ 左そして 右は位置の方向をそれぞれ左と右に示します。 なし- デフォルト値。要素が浮動ではないことを示し、 継承する要素にプロパティの値を継承するように指示する フロート親要素から。

フロートは何に使用されますか?

画像の周りにテキストを折り返す単純な例を超えて、 フロート Web レイアウトの作成に使用できます。

フロート、小さなレイアウト要素に使用するのにも便利です。 たとえば、Web ページのこの小さな断片を考えてみましょう。 プロパティを設定すると フロート小さいアバター画像の場合、画像サイズが変更されると、新しい画像の寸法に応じてラッピングが変更されます。

コンテナの相対位置と、その中のアバターとテキストの絶対位置を使用して、同じレイアウトを実装できます。 ただし、このスキームに従って実装されたレイアウトでは、絶対配置の要素は他の要素に影響を与えず、他の要素もそれらの要素に影響を与えないため、画像サイズを変更してもテキスト ブロックには影響しません。

ラップリセット

クリア関連するプロパティとプロパティ フロート。 プロパティが設定された要素 クリアプロパティが設定された要素の周囲で上方向に移動しません フロート、しかし流れを無視して下に移動します。 ここでも、苦労することなくすべてを説明する図です。

上の例では、サイドバーがメイン コンテンツ ブロックの右側にフローティングされていました。 「フッター」はサイドバーの下の空きスペースに移動し、メインコンテンツとともにブロックの周りを流れます。 この問題を解決するには、フッターの clear:both プロパティの値を指定して、両方の列の周囲のフローを「クリア」する必要があります。

#フッター (クリア: 両方; )

財産 クリアには4つの意味があります。 両方両方向の流れを緩和するために使用されます。 左そして 右は、それぞれ左または右の一方向をリセットするために使用されます。 なし- デフォルト値。 継承する 5 番目の値にすることもできますが、驚くほどサポートされていません インターネットエクスプローラー 。 左または右の流れのみをリセットすることは非常にまれですが、実用的な利点があります。

大崩壊

協力する上での 1 つのこと フロート不可解なのは、このプロパティが親要素に与える影響です。 親要素に float 以外の要素が含まれていない場合、その高さは文字通り折りたたまれます。 これは、特に親要素に目立つ背景がない場合には、必ずしも目立つわけではありませんが、心に留めておくことが重要です。

しかし、そのような崩壊に代わるものはさらに悪いものです。 次のシナリオを考えてみましょう。

フローティング要素を収容するために上部のブロックが自動的に拡張されると、最終的に段落間のテキストの流れにギャップが生じ、それを修正する方法はありません。 もしそうなら、開発者は、崩壊について現在言っているよりも、フローティングブロックのこの動作についてはるかに頻繁に苦情を言うでしょう。

奇妙なレイアウト動作やブラウザ間での問題を防ぐために、折りたたむことを常に念頭に置く必要があります。 この問題は次を使用して解決できます クリアコンテナ内の浮動要素の後、コンテナが閉じる前。

ラッピングキャンセルテクニック

次の要素がどこにあるかがわかっている状況では、clear:both を使用して作業を進めることができます。 これはハッキングや追加要素を必要としないため、理想的です。 しかし、残念ながら、通常はすべてが思いどおりに進むわけではありません。この場合は、次のツールを使用できます。

空ブロックメソッド。

文字通り空のブロックです。

。 要素が見つかることもあります
またはその他の ランダム要素ただし、ブラウザにデフォルトのスタイルがなく、特別な機能もなく、一般的には存在しそうにないため、div が最も一般的です。 CSS スタイル。 このメソッドはセマンティック純粋主義者によって拒否されます。その理由は、このメソッドの存在にはページ上で文脈上の意味がなく、目的のためにのみ存在するためです。 外観。 もちろん、厳密な意味ではそれらは正しいですが、彼は自分の仕事を果たし、誰も傷つけません。

オーバーフロー方式。

CSS プロパティの指定に基づく オーバーフロー親要素の場合。 このプロパティが次のように設定されている場合、 自動または 隠れた親要素の場合、フローティング要素の後に展開され、後続の要素のラッピングが事実上リセットされます。 このメソッドは追加の要素を必要としないため、意味的に美しいものになります。 ただし、ご覧のとおり、新しいものが追加されました ディビジョンこの方法を使用することは、非セマンティックな空のブロックを使用することと同等であり、柔軟性が低くなります。 また、プロパティは次のことを覚えておく必要があります。 オーバーフローラッピングを無効にすることを目的としたものではありません。 誤ってコンテンツを非表示にしたり、不要なスクロール バーが表示されたりしないように注意してください。

簡単な掃除方法。

CSS 疑似セレクター (:after) を使用してラッピングを削除します。 プロパティを使用する代わりに オーバーフロー親要素には、「clearfix」などの追加クラスを設定し、次の CSS スタイルを使用します。

Clearfix:after (内容: "."; 可視性: 非表示; 表示: ブロック; 高さ: 0; クリア: 両方; )

これは、親要素の後に位置し、ビューから隠された小さなコンテンツを使用し、ラップをリセットします。 この方法は、古いブラウザをサポートするように改良する必要があるため、完全ではありません。

状況に応じて、異なるブラフ リリーフ方法が必要になります。 例として、さまざまな種類のブロックのグリッドを考えてみましょう。

類似したブロックをより視覚的に組み合わせるには、まず始めなければなりません。 改行色が変わるとき。 各カラー グループに親要素がある場合は、オーバーフローまたはライト クリア方法を使用できます。 または、グループ間で空ブロック方式を使用します。 以前は存在しなかった 3 つの親ブロック、または以前は存在しなかった 3 つの空のブロック。 どの方法がより良いかを決めるのはあなた次第です。

フローティング要素の問題

浮動要素は、その脆弱性のためにしばしば批判されます。 この脆弱性の多くは IE6 とその float 指向のバグ。 しかし、IE6 のサポートを終了する開発者が増えているため、あまり気に留めていないかもしれませんが、互換性を気にする人のために、短いリストを次に示します。

プッシュダウン、フローティング ブロック内の要素がそのブロックよりも幅が広いという症状です (これは通常、画像で発生します)。 ほとんどのブラウザでは、フローティング要素が突き出てレンダリングされますが、これはレイアウトには影響しません。 IE はフローティング ブロックを拡張しますが、多くの場合、これはレイアウトに大きな影響を与えます。 典型的な例は、メインコンテンツのブロックからはみ出した画像が、押し出されたものです。 サイドバー下。

素早い解決策問題: オーバーフローを使用: 非表示;

余分な部分を切り取るために。ダブルマージンのバグ フロート- IE6 を使用するときに覚えておくべきもう 1 つのこと。 このバグは、フィールドが方向と同じ側にある場合に、

、フィールドが 2 倍になります。 例えば： レフトフィールドを取得します 40ピクセル 。、 の代わりに.

20ピクセル問題の素早い解決策

: フローティング ブロックに display: inline を設定します。要素はブロック レベルのままであることを心配する必要はありません。 3px ジョグ 20ピクセル。 このバグの本質は、あたかも浮動要素の周囲にある力場の影響下にあるかのように、浮動要素の隣にあるテキストが奇妙に 3 ピクセルだけシフトしていることです。

: 影響を受けるテキストの幅と高さを設定します。 IE7で表示される下マージンのバグ 20ピクセル、親要素が浮動要素であり、その中にある子も浮動要素である場合。 子の下マージン (margin-bottom) は、祖先要素によって無視されます。

: 子要素の margin-bottom ではなく、親要素の padding-bottom を使用します。

要素がどちらの側に配置され、他の要素が他の側でその周囲を流れるかを決定します。 float プロパティが none に設定されている場合、要素は通常どおりページ上に表示されますが、要素自体と同じ行に 1 行の折り返しテキストを含めることができます。

構文

浮動小数点: 左 | 右 | なし | 継承する

価値観

left 要素を左に配置し、テキストなどの他のすべての要素がその周囲に右に配置されます。

right 要素を右に配置し、その周囲の他のすべての要素を左に配置します。

フロート Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diem nonummy nibh euismod Tincidunt ut lacreet dolore magna aliguam Erat volutpat。性的暴行の結果でヘンドレリットの無実の苦しみを味わい、ベロエロスとアキュムサンとイウストでの恐ろしい無実のファシリシスを、あなたが今までにないほどの恐怖と恐怖を感じてください。

結果

この例

図に示されています。 1.

米。 1. float プロパティの使用

オブジェクトモデル

document.getElementById("要素ID ").style.styleFloat document.getElementById("要素ID ").style.cssFloatブラウザ

で

インターネットブラウザ

Explorer 6 には、親要素内にネストされた浮動要素の左または右のパディング値が 2 倍になるというバグがあります。 親側に隣接する余白は2倍になります。 この問題は通常、float 要素に display: inline を追加することで解決されます。 このブラウザは、float 値で指定された方向に 3 ピクセルのパディング (いわゆる「3 ピクセルのバグ」) を追加します。 Internet Explorer のバージョン 7.0 までは、値の継承をサポートしていません。 Float プロパティは、HTML と CSS を扱う Web 開発者にとって重要かつ強力な資産です。 一方で、このプロパティがどのように機能するかを完全に理解していないと、イライラしたり混乱したりする可能性があります。

記事の翻訳 フロート CSS フロート 101 。 オリジナル alistapart.comまた、以前はブラウザにかなり厄介なバグがあったため、プロパティを使用するときに緊張するのが普通でした。

印刷業界では、画像が左右に配置され、その周囲にテキストが適切に配置された雑誌記事を見ると、毎日のように浮遊するものを目にします。 HTML/CSS の世界では、画像に適用される float プロパティに応じて、テキストが画像をラップします。 画像での float プロパティの使用は、多くの例のうちの 1 つにすぎません。 別の例として、float プロパティを使用すると、一般的な 2 列のレイアウトを非常に簡単に作成できます。 実際、float プロパティは HTML 内の任意の要素に適用できます。 float プロパティとposition プロパティの使用法を学び、理解することで、レイアウトを作成するときに快適かつ自信を持って行うことができます。

フロートの定義

何が何であるかを定義することから始めましょう フロート.

Float は、現在の行に沿って右または左に移動するボックスです。 フロートの最も興味深い特徴は、コンテンツがフロートの側面に沿って流れることができることです。 float: left プロパティを適用すると、コンテンツは右側のボックスの下に流れ、同様に float: right - down の左側に流れます。

float プロパティには、適用できる 4 つの値があります: left 、 right 、 inherint 、 none です。 それぞれの意味は非常に明確です。 たとえば、要素上で float: left を使用すると、その要素は親要素を基準にして左端の境界線に移動します。 また、 float: right を指定すると、要素は同様に右に移動します。 値 ihnerit は、要素に親要素からプロパティを継承するように指示します。 最後の値 none はデフォルトであり、プロパティを適用しないことを示します フロートこの要素に。

#container ( 幅: 960px; マージン: 0 auto; ) #content ( float: left; width: 660px; background: #fff; ) #navigation ( float: right; width: 300px; background: #eee; ) #footer (クリア: 両方; パディング: 10px)

#footer が #navigation ブロックの下にスタックしています。 これは、#navigation ブロックの下に #footer 用のスペースがあり、ブロック配置の通常のフローではこれが正しい動作であるために発生しました。 しかし、これは絶対に必要なことではありませんね。 フロートとクリアの関係はすでに理解しており、それらがどのように相互補完するかを理解していると思います。

私と同じように強迫性障害を患っている人は、例 F の #content 列と #navigation 列の高さが異なることに気づいたかもしれません。 解決策はいくつかありますが、これはこの記事の範囲外です。 Dan Cederholm 著の『Faux Columns』を読んで、中身に関係なくブロックを同じ高さにする方法を学ぶことを強くお勧めします。

最初にフロートします

これまでのところ、いくつかの美しいものを見てきました 簡単な例それほど頭痛を引き起こすことはありません。 ただし、いくつかあります 落とし穴 float プロパティを使用する際の考慮事項。 驚くべきことに、最大の落とし穴の 1 つは CSS とはあまり関係がなく、むしろ HTML に関係しています。 float 要素を HTML 内に配置すると、異なる結果が生じる可能性があります。 例 H を見てください。

ここには、float:right プロパティを持つ画像とそれを囲むテキストを含む小さなブロックがあります。 CSS は次のようになります。

#container (幅: 280px; マージン: 0 自動; パディング: 10px; 背景: #aaa; ボーダー: 1px ソリッド #999; ) img (float: right; )

親の #container 要素は幅が狭いため、フローティング要素 (画像) はその境界線内に保持されます。 HTML コードは次のようになります。

この例では望ましい結果が得られますが、HTML 内のいくつかの要素を取り出して再配置するとどうなるでしょうか? 例 I では移動しました テキストの後に

私たちの結果は期待されたものではありませんでした。 画像は右に移動しましたが、希望どおりに上隅に配置されなくなり、段落の下に落ちてしまいました。 さらに悪いことに、親 #container 要素の下部から突き出ています。 何が起こっていますか？

まず最初に。 私が自分で見つけたルールは、要素を最初にフローティングにすることです。 私の HTML では、ほとんどの場合、フロート要素をマークアップの先頭、およびフロート要素が相互作用する非フロート要素 (上記の例の段落など) の前に追加します。 ほとんどの場合、これにより良い結果が得られます

第二に。 画像が #container ブロックの底からはみ出しているように見える理由は、「崩壊」と呼ばれるものが原因です。 崩壊と解決策について話しましょう。

崩壊する

折りたたみとは、任意の数のフロート要素を持つ要素が、ネストされた要素がフロートされていない場合のように、ネストされた要素の周囲の境界線を拡張しないことを意味します。

ここで、以前のようにドキュメントに追加の HTML マークアップを追加するのではなく、CSS を使用してこの問題を修正してみましょう。 すべての浮動要素の後に、親要素がクリア プロパティを「適用」できるようにするメソッドがあります。 これを行うには、オーバーフロー CSS プロパティを値 hidden で使用します。 オーバーフロー プロパティはこの方法で使用することを意図したものではないため、コンテンツが非表示になったり、不要なスクロールバーが表示されたりするなど、問題が発生する可能性があることに注意してください。 ただし、この例では、引き続き overflow: hidden プロパティを親の #container 要素に適用します。

#container (オーバーフロー: 非表示; 幅: 260px; マージン: 0 自動; パディング: 10px 0 10px 10px; 背景: #aaa; ボーダー: 1px ソリッド #999; )

そして最後に、 エリック・マイヤー氏は、「浮動小数点を含む」という記事で、この問題に対する 3 番目の解決策を説明しています。 CSS 仕様 2.1 によると:

float プロパティを持つ要素は、その境界線を内部のフローティング要素に拡張します。

したがって、 float プロパティを #container に適用すると、上で説明した方法と同様に、コンテナーに画像と段落が含まれるようになります。

結局のところ、これらのソリューションはすべて同じことを行います。 これらは、親要素にフロート要素をカウントするよう強制します。 各方法には独自の利点と利点があります。 それぞれを理解し、状況に最も適したものを適用する必要があります。

結論

float プロパティを使用すると、要素を配置する技術を大幅に向上させることができます。 特定のプロパティがどのように機能し、その動作に何が影響するかを理解すると、float を効果的に使用するための強固な基盤が得られます。

: 子要素の margin-bottom ではなく、親要素の padding-bottom を使用します。

CSS の float プロパティを使用すると、設定されている値に応じて要素を親要素の左端または右端に移動して、要素をフロートにすることができます。 フローティング要素の幅が明示的に設定されていない場合、コンテンツに合わせて幅が圧縮されます。

ブラウザがコードを処理する HTMLドキュメント上から下に移動すると、コード処理がフローティング要素に到達すると、ブラウザはドキュメントの流れに従ってそれを最初に配置します。 ドキュメント コード内の要素の下にあるフローティング要素を通常のフローから削除し、親要素の左端または右端にできる限り移動します。

フローティング要素がドキュメントのフローから削除されているため、コード内にある残りのブロック要素は、その要素が存在しなかったかのように、その場所に移動されます。

フロート要素が通常のフローから削除されても、インライン コンテンツは依然として影響を受けます。 ブロック要素とは異なり、コード内でフローティング要素の後に配置されるインライン コンテンツは、その境界線を考慮してその周囲を回り込みます。つまり、テキストはフローティング ブロックの周囲を回り込みます。

テキストコンテンツを含むフローティングブロックの代わりに、フローティング画像を作成できます。 この場合、テキストは画像の周りを回り込みます。

を使用することで CSS プロパティ float 画像を左側に浮かせました。

画像の下の HTML コードにあるテキストは、画像の右側と下側に沿って回り込みます。

試す "

親要素の幅が許せば、同じ行に複数の浮動要素を配置できます。 親要素の幅が十分でない場合、他の浮動要素と一列に収まらない浮動要素は押し下げられます。 浮動要素は親の高さには影響しません。つまり、コンテナがあり、それに浮動要素のみが含まれている場合、コンテナの高さはゼロになります。 決めるこの問題

1. 次の方法で可能です。
2. コンテナーの高さがわかっている場合は、固定の高さを設定します。

auto または hidden の値を持つオーバーフロー プロパティをコンテナーに適用すると、コンテナーの高さを計算するときにフローティング要素が考慮されます。 この方法は、コンテナの高さがどれくらいであるべきかが事前にわからない場合に使用できます。 float プロパティは次の場合にのみ機能します。ブロック要素

したがって、float プロパティが他の型の要素に適用される場合、それらはブロック型に変換されます。

: 子要素の margin-bottom ではなく、親要素の padding-bottom を使用します。

要素がどちらの側に配置され、他の要素が他の側でその周囲を流れるかを決定します。 float プロパティが none に設定されている場合、要素は通常どおりページ上に表示されますが、要素自体と同じ行に 1 行の折り返しテキストを含めることができます。

構文

浮動小数点: 左 | 右 | なし | 継承する

価値観

left 要素を左に配置し、テキストなどの他のすべての要素がその周囲に右に配置されます。

right 要素を右に配置し、その周囲の他のすべての要素を左に配置します。

注: 絶対位置および固定位置の要素は、float プロパティを無視します。 また、float プロパティはフレックスボックスには影響しません。

結果

この例

図に示されています。 1.

米。 1. float プロパティの使用

オブジェクトモデル

Internet Explorer 6 では、親要素内にネストされている浮動要素の左または右のパディング値を 2 倍にする際に問題があります。 親側に隣接する余白は2倍になります。 この問題は通常、float 要素に display: inline を追加することで解決されます。 このブラウザは、float 値で指定された方向に 3 ピクセルのパディング (いわゆる「3 ピクセルのバグ」) を追加します。

で