css についてどれくらい知っていますか (8) -- float パート 1_html/css

1. はじめに

私たち Web フロントエンド開発者にとって、Float は最も身近な存在でしたか、かつてはそうでしたか?? . あなたほんの少しの知識があればとても簡単だと思っていましたが、そのさまざまな奇妙な現象を制御することはできませんでした。

これは私たちが嫌いなものですか??フロートです。したがって、float を体系的に学ぶことは非常に重要です。本やブログ記事を読むだけでなく、見知らぬ人 (その声は非常に魅力的ですよね) が録音したチュートリアル「CSS Float の徹底理解」を読むことをお勧めします。これは非常に優れており、徹底的です。

2. float を再理解する

2.1. 誤解と「誤用」

「誤用」について言及されているので、読者はそれについて考えてください。日常的に float をどのように使用しますか?また、「誤用」と括弧書きでくくっていることから、そのような使用は本当の誤用ではなく、実際の効果をもたらす偶発的な使用であることを意味しています。

皆さんに聞くと、floatを使う人のほとんどは横レイアウトか複数列レイアウトだと思います。この使用法は正しく、ほとんどの人がこの方法で使用しています。Bootstrap のグリッドシステムも float を使用して実装されており、CSS3 が普及する前は、複数列レイアウトの最適な解決策も float を使用することでした。それ以外の場合は、table を使用するだけです。

ただし、float はもともとテキストの折り返し効果に使用するように設計されているため、この使用法は確かに誤解であり、float の「誤用」です。つまり、画像とテキストがある場合、画像の float:left の後、テキストが画像の周りを回り込みます。

しかし、当時、複数列レイアウトと横組版は主にテーブルによって実装されていましたが、その後、テーブルを使用すると大量のコードが発生し、混乱が生じ、SEO に役立たないことが判明しました。 float+div が非常に優れたレイアウトソリューションであることがわかりました。なぜですか?? ここ数年、「css+div」ページレイアウトが注目を集めており、あらゆる種類のページレイアウトに必須でもあります。ハイレベルな面接の質問。

float を初めて使用する学生は、最も基本的な知識から始めず、インターネット上に散在するコードや同僚やクラスメートの散在するコードから始めると、float が植字に使用されることしか知らないかもしれません。しかし、Float には多くの特性があり、Float を使用すると多くの問題が発生することはわかりません。信じられない場合は、以下をお読みください。

2.2. 破壊的

まず、以下に示す 2 つのデモを見てみましょう。最初のデモは単純な例であり、表示効果は通常のものです。 2 番目のデモでは、唯一の違いは、float:left がに追加されていますが、上部の

が「折りたたまれている」ように見えることです。

しかし、これがfloatの「破壊性」なのでしょうか? Floatは親タグの本来の構造を破壊し、親タグを崩壊させます。この現象の最も根本的な理由は、フローティングに設定された要素がドキュメントフローから切り離されることです。

「分離されたドキュメントフロー」を初めて使用する友人は、次のように理解できます。div は父親であり、img はその息子です。もともと良好な父子関係がありましたが、父と子は次のような効果を示す可能性があります。関係もきちんと含まれています。ある日まで、img はフローティングに設定されていました。神（ブラウザ）はfloat要素を自身のファミリー内に残してはいけないと定めているため、imgはファミリーから追放され、divとは親子関係を断ち切られました。その結果、div には img 息子がなくなり、この父と子の包含関係を表示できなくなり、この 2 つは互いに独立しており、互いに何の関係もありません。 ??こうすると分かりやすいですよね？

ただし、テキストの折り返し効果を実現するという、float の設計当初の目的を決して忘れないでください。 div にテキストがある場合でも、テキストは img の周囲に回り込みます。以下に示すように: ああ、

、Float が破壊的であることは今では誰もが知っています。おそらく多くの友人が以前からこの特性を知っていたかもしれませんが、次のように思いますか: Float は、いくつかの機能を持つように設計されています。破壊的ですが、なぜドキュメントフローから切り離されるのでしょうか?この点は非常に重要です！実際、その理由は非常に単純で、テキストの折り返し効果を実現するためでしょうか?

誰かがこう尋ねるかもしれません：え？ float の本来の目的はテキストの折り返し効果を実現することだと今言いませんでしたか?それは破壊力と何の関係があるのでしょうか？

このとき、私はあなたに尋ねます：floatが親要素を折りたたまない場合、テキストの折り返し効果は達成できますか？写真を2枚あげますので、分かると思います。理解できない場合は、メッセージを残して相談してください。

2.3. 「ラッピング」

「ラッピング」も float を使用する際には、この機能をよく知っているはずです。小さな例から始めましょう:

上の図に示すように、ボックスモードに関する前のセクションで説明したように、通常の div の幅が設定されていない場合は、画面全体が表示されます。そして、divにfloat:leftを追加すると、突然コンパクトになり、幅が変わり、コンテンツ「Wang Fupeng」がラップされます?? これはラップです。 div を float に設定すると、その幅は親コンテナ全体を埋めるのではなく、コンテンツの幅を包み込むように自動的に調整されます。

この時点で div はラッピングを反映していますが、その表示スタイルは変更されておらず、ブロックのままであることに注意してください。

前回のブログで「ラッピングプロパティ」についても触れました。ここで考えていただければ、ブログのコメントで答えをお伝えします。

ラッピングの性質を知った後も、「なぜ float にラッピングの性質があるのか」と考え続けます。実際、Float はテキストの折り返し効果を実現するために設計された本来の設計意図から答えを見つける必要があります。画像の周りでテキストを折り返すのは簡単ですが、テキストを div の周りで折り返す場合はどうすればよいでしょうか?この時点では div は「ラップ」されていないので、周囲の効果を実現するにはどうすればよいでしょうか?

理由はとても簡単です。 2.4. スペースのクリア

Float には、あまり馴染みのない機能もあります。それは、スペースのクリアです。経営陣によると、まず例を挙げてみましょう。

上の写真です。最初の例では、複数のタグに改行があり、ブラウザは改行をスペースとして認識するため、通常の img の途中にスペースが入ります。 2 番目の例では、float:left スタイルが img に追加されます。これは、img の間にスペースがなく、4 つの img が互いに近接していることを意味します。

これまで気付かなかった場合は、以前に作成したプログラムにこの機能がないか考えてください。 float が Web ページのレイアウト (一般に「レンガの配置」として知られている) に適しているのはなぜですか?それは、float でレイアウトされた Web ページがぴったりと収まり、ハエも真ん中に飛ばないからです。

「クリアスペース」機能の基本的な理由は、float によってノードがドキュメントフロー構造から切り離されるためです。これはドキュメントフロー構造に属さないため、その周囲の改行やスペースは関係ありません。これが、スペースをクリアすることの本質です。。

(フロートの内容が多いので、上下2回に分けてご紹介します。今回は前編です。次回は近日公開予定ですので、お楽しみに)

---- ---------------------------------------------------- ---------------------------------------------------- --------

私のチュートリアルへのフォローを歓迎します:

「デザインからパターンまで」

「 JavaScript プロトタイプとクロージャシリーズの深い理解」「Microsoft petshop4.0 ソースコード解釈ビデオ」 json2.js ソースコード解釈ビデオあなたも私のオープンソースプロジェクトをフォローすることを歓迎します??

wangEditor、シンプルで使いやすい Web リッチテキストエディター

---------- ------------------------ ------------------------ ------------------------ ------------------------