CSSフロートは非推奨ですか？

最近の仕事で興味深い質問が出てきました。CSSグリッドとFlexBoxを使用した後、CSSフロート属性も使用する必要がありますか？

短い答え

いいえ！または、ほとんどの場合、それは使用されていません。今日、私はそれをテキストサラウンドの写真にのみ使用し、レイアウトに完全に使用しないようにします。

より長く、より厄介な答え

FlexBoxとグリッドが出現する前に、CSSフロートプロパティを使用してグリッドとレイアウトを作成する必要があります。実際、これはWebデザインを学習するときに接触した最初の属性です。暑い夏の午後、私はジェフリー・ゼルドマンによる「Web標準のデザイン」という本を開き、 float: rightに小さな赤いdivを動かしました。これは単に魔法です！フロートには大きな力があります。

画面上の要素を移動するのは非常にシンプルなので、このモバイル要素のシンプルさのために、何人のデザイナーがWebデザインに恋をしたのか疑問に思います。

ただし、Floatを使用した複雑なレイアウトの構築は、常にストップガップソリューションでした。実際、写真の周りにテキストを保持するように設計されています。

 <code>img { width: 150px; float: left; }</code>

フロートの問題は、大きなレイアウトと雑誌スタイルのグリッドを構築しようとすると始まります。しかし、その後、私たちはそうする以外に選択肢がありませんでした。

Float属性の問題の1つは、Floating要素をClearFixと呼ばれるもので包む必要があることです。これは次のようになります。

<code><div>
  <div>カラム</div>
  <div>カラム</div>
  <div>カラム</div>
</div></code>

<code>clearfix:after { content: ""; display: table; clear: both; }</code>

ジェイ・ホフマンは、以前にクリアフィックスハックについて説明しました。

ClearFixは、知らない人のために、これはCSSハックであり、2つの浮遊要素が並んで積み重ねられているときに発生する永続的なバグを解決します。この方法で要素が整列すると、親コンテナの高さが0になり、レイアウトを簡単に破壊できます。サイドバーをメインコンテンツブロックの左側に配置するだけかもしれませんが、その結果、2つの要素が重複して崩壊します。より複雑なことは、このバグが異なるブラウザで一貫性がないことです。 ClearFixは、これらすべての問題を解決するために発明されました。

その後、状況はゆっくりと変わり始めました。 2017年に、Rachel Andrewは、ブラウザがハッキングせずにClearFixの問題をどのように処理できるかを説明しました。同じ修正を達成するには、次のCSSのみが必要です。

 <code>.container { display: flow-root; }</code>

奇妙なことに、私は入力する3分前までflow-root値の存在を知りませんでした。しかし、これは私が次に言うことを証明するかもしれません： CSSグリッドとフレックスボックスでは、実際にはフロートはまったく必要ありません。このプロパティは、もともと1つの目的で設計されていました。テキストが画像を囲むことを許可することです。しかし、今では、GridとFlexBoxを使用すると、実際のレイアウトを実行できる強力な機能があります。

私が職場で持っていた議論に戻ってください。一部の人々は、非常に古いコードであり、FlexBoxまたはグリッドに簡単に置き換えることができるため、コードベースに戻ってフロートのすべてのインスタンスを削除する必要があると言う人もいます。しかし、ここでは、「待って！」と言いたいです。コードベースの一部の場所にフロート属性を保持することは、大きなダメージを与えるとは思わない - 問題を引き起こすのは放射性コードではない。

それでは、テキストを画像の周りにラップする以外に、他の目的のためにCSSフロートを使用する必要がありますか？いいえ。ただし、すべてのCSSフロート宣言をすぐにクリアする必要があります。これは、純粋ではなく、「正しい」アプローチではないためです。どちらも。

ネットワークの美しさは、古いコードが物事を壊すべきではないということです。クリスに聞いてください。最も見事なCSS属性や最もクールなトリックを使用していないWebサイトは、役に立たないことも悪いこともありません。フロートをより良い代替品に置き換えました。これは、これらのCSSプロパティが最新のWebデザインにまだ適用可能なユースケースがあるため、永遠にそこにある可能性があるという良い教訓だと思います。

これはとても良いです。

以上がCSSフロートは非推奨ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。