CSS_Experience 交換における Float に関連する技術記事

Float の概念は、おそらく CSS で最もわかりにくい概念です。フロートは、すべてのコンテキスト要素をフローティングすることによって引き起こされる可読性と使いやすさの問題として誤解され、批判されることがよくあります。ただし、これらの問題の根本原因は理論そのものではなく、開発者やブラウザによる理論の解釈にあります。

フローティングの概念を注意深く読むと、見た目ほど複雑ではないことがわかります。問題のほとんどは、古いバージョンの IE が原因で発生します (単なる推測です)。これらのバグを知っていれば、これらの問題を回避できます。

これらの問題に対処し、float の使用に関するこれまでの誤解を解いてみましょう。私たちは数十の関連記事を参照し、知っておくべき最も重要な記事を選択しました。

フロートについて知っておくべきこと
---------------------------------- - ------------------------------------------------- - ----------------------

「グラフィックスとテキストを囲む習慣は、ずっと昔に遡ります。だから Netscape1.1 からこの機能がブラウザに導入されたときに始まり、CSS がその実装に float 属性を使用した理由も説明されています。「Float」という用語は、Netscape 1.1 とともにリリースされた「Additions to HTML 2.0」文書から参照されており、「フローティング要素の配置は依然として通常のドキュメント フローに基づいており、ドキュメント フローから抽出され、可能な限り左側または右側に移動されます。テキスト コンテンツはフローティング要素の周囲に配置されます。要素が通常のドキュメント フローから抽出される場合ドキュメント フローの場合、ドキュメント フロー内の他の要素はその要素を無視し、元のスペースを埋めます。"

"要素はフローティングされた後、自動的に回転します。はブロック レベルの要素です。この要素は移動できます。現在の行の左または右に配置されます。属性は次のとおりです: float: left、float: right、または float: none"

"Defined width 属性を設定する必要があります ( でない場合) "

"たとえば、浮動要素には、明示的に指定されているか暗黙的に指定されているかにかかわらず、幅プロパティが定義されている必要があります。また、幅が設定されていない場合、結果は予測できません。 , 非フローティング コンテンツと同様に、コンテナ要素を可能な限り水平方向に埋めて、他のコンテンツがそれらを囲む余地を残しません。第 2 に、通常のドキュメント フローでは、異なる要素では、フローティング要素の垂直方向のマージンは重なりません。要素は、通常のドキュメント フロー内の隣接するブロック レベル要素とオーバーラップする可能性があります (注釈: フローティング要素は通常のドキュメント フロー スペースを占有しないため、オーバーラップとして理解するのではなく、空中に浮遊するという概念として理解することをお勧めします。)。

「最初に心に留めておく必要があるのは、浮動要素は左または右にのみ浮動できるということです。中央に浮動するなどということは存在しません。これは、多くの初心者が間違いやすいということです。覚えておいてください。」最も基本的なルールは、フローティング要素は両側にのみフローティングできるということです。"

"要素をフロートさせると、コンテナの端に接触するまで右または左にフロートします。別の要素を同じ方向にフロートさせると、その要素は前にフロートさせた要素の端に当たるまでフローティング状態になります。さらにフローティング要素を追加すると、要素は 1 つずつ配置されますが、すぐにスペースが不足し、行にフローティング要素を収容できなくなると、次のフローティング要素が別の行にラップして配置され続けます。 "

ブロックを含む、またはボックスを含む: "コンテナ要素は、他の子要素を含む行レベルまたはブロック レベルの要素を指します。 。 。 。 " "明示的に指定すると、フローティング要素の垂直位置はドキュメント フロー内の元の位置によって決定され、上部は現在の行の上部に揃えられます。ただし、水平方向では、コンテナ要素の端に向かって可能な限り移動しますが、それでもコンテナ要素のパディングに従います。同じ行のインライン要素がフローティング要素の周囲に配置されます。 ”

「フローティング要素は通常のドキュメント フロー スペースを占有しないため、フローティング要素の前後に位置が明示的に指定されていないブロックレベル要素は、あたかもフローティング要素があるべき位置を占めます。決して存在しませんでした。フロート要素の後の線は、フロート要素に基づいて幅が縮小します。フロート要素の前の要素は再配置され、別の行を占めます。 (注釈: この場合、ie と ff は異なる動作をします)"

"現在の行の水平方向に浮動要素を収容するのに十分なスペースがない場合は、浮動要素を収容できるスペースができるまで次の行に進みます。フローティング要素を収容できる要素の行。 "

"浮動要素は元のドキュメントの場所の上限を超えることはできません。フローティング要素の上部は、現在の行の上部 (または、現在の行要素がない場合は、前のブロック レベルの要素の下端) に揃える必要があります。 ”

「float 理論を真に理解するには、CSS の行ボックスが何なのかを理解する必要があります。残念ながら、行とは何かを説明するには、まず行レベルの要素が何であるかを理解する必要があります。行レベルの要素は、 などの非ブロック レベルの要素を指します。行は論理概念です。行を構成するすべての行レベルの要素を含む仮想四角形です。その高さは少なくとも同じです。これらの行レベルの要素に追加されます。 "

"Div 内のすべての列に float: left を追加すると、列は 1 つずつ左に配置されます。ページの下部にフッターを置きたい場合は、追加しません。 「clear:both」を追加するだけであれば、最長の列は必要ありません。"

"フローティング要素を含めるためにフローティング要素を使用すると、潜在的な欠点があります。つまり、ページが常に一貫したプレゼンテーションを維持できるかどうかは、ブラウザ 実装の一貫性が保たれているかどうか。特にフロート要素がより複雑なレイアウトの一部である場合、さらに脆弱になります。

フロートの片付け
------------------------------------- -------------------------------------------------- ----------

"フロート要素の後の要素は、フロート要素を自動的に囲みます。これを望まない場合は、これらの要素に「clear」属性を適用できます。この属性には 4 つの設定があります: クリア: 左、クリア: 右、クリア: 両方、またはクリア: なし」

追加の非セマンティック タグを導入せずにフローティング要素をクリーンアップする手法は数多くあります。以下の 3 つの方法がより一般的です。 ) フローティング コンテナ要素をまとめてフローティングする b) オーバーフローを使用する: コンテナ要素で非表示にする c) 次のような CSS 疑似クラスを使用する: after.

"クリーンアップ要素を挿入することは、コンテナをすべてのフローティング要素を正しくラップするための標準的な方法にすることですそうすると、コンテナの下端を「ドラッグ」して、含まれている要素を包み込む効果があります。 "

"フロート設計に基づくレイアウトの場合、よくある問題は、フロート要素のコンテナがフロート要素を含むように自動的に拡張されないことです。すべてのフローティング要素の周囲に境界線を追加する場合 (たとえば、コンテナー要素の周囲の境界線)、コンテナーを引き伸ばすようにブラウザーに明示的に命令する必要があります。オーバーフローメソッドを使用できます。 ”

using:after :after を使用してピリオドを挿入し、そのプロパティ {clear: Both;} を設定することを想像してください。必要なのはこれだけですが、誰もコンテナの底を受け入れません。わずかな隙間があるため、完全にフィットするように {height: 0;} と {visibility: hidden;} も設定する必要があります。