css 简析folat_html/css_WEB-ITnose

1.float??

ページがドキュメント フローであると前に述べたことをまだ覚えているかわかりませんが、具体的には言いません。それでは、ページ レイアウトに div を使用すると、ブロック要素はどのように配置され、ブロックとは何でしょうか?実際に見てみましょう。

div レイアウトを使用すると、問題が発生する可能性がありますか?

またお会いしましょう。 xxxxx を Box-1 と組み合わせたい場合はどうすればよいでしょうか? 問題を解決するには位置決めを使用できるとすでに述べたと思われるかもしれませんが、今日はそれを実現するために float を使用することについて話します。フロートを追加すれば、それは実現できるでしょうか? Kaixin は、私たちの要件を完全に満たすことができますか?実際、私たちは横組版や複数段のレイアウトに float をよく使用します。実際、これには問題があります。お気づきかどうかはわかりませんが、フローティング要素を使用して通常のドキュメント フローから切り離した後、実際には、フローティング要素に続いていた要素は次のようになります。スペースが許す限り、フローティング要素まで上方に移動します。

W3 標準を読んだことがある人は、これが現実とは異なることに気づくかもしれません (使用シナリオを参照します)

float 属性は、要素がどの方向にフロートするかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。 m 、

テキストの折り返しについて話しているので、画像を使用してその実装方法を説明しましょう。画像やその他の要素をフロートさせると、ブラウザに対して、親要素の内側の境界線に当たるまでそれを上に押し上げるように要求することになります。後続の段落では、フロート要素がドキュメント フロー内で前にあるとはみなされなくなります。したがって、親要素の左上隅を占めます。テキストが回り込みます。

それで、float の特徴は何ですか?

ラッピング。破壊的です

ラッピングとは何ですか?

folat を追加するとどうなるでしょうか?

明らかなことがあります。違い。このボックスの違いは何でしょうか? 実際、この時点で、div に float:left を追加すると、ボックスは突然コンパクトになり、幅が変わり、コンテンツ「Wang Fupeng」が折り返されます。これがラッピングです。 div が float に設定されると、その幅は親コンテナー全体を埋めるのではなく、コンテンツの幅を包み込むように自動的に調整されます。この時点では div はラッピング プロパティを反映していますが、その表示スタイルは変更されておらず、ブロックのままであることに注意してください。 。 display:inline-block と float の違いは何ですか?理由の 1 つは、float は右から左に配置できるのに対し、display:inline-block の方向は水平方向、つまり左から右のみであることです。 . この2つの違いです。しかし、要素を右から左に配置する必要がある頻度はどのくらいでしょうか?非常にまれなことなので、CSS に float 属性がないことは大したことではなく、ただそれだけのことです。

破壊的: (これはコピーされたアドレスです http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6% B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B% 93%E5%B1%95%E4%B8%80/) 言ったより気持ちいいので勉強になりました

2. フローティングの「破壊力」

フローティングは「王様」とも言えます。すべての CSS プロパティの中で「破壊」。浮遊の破壊性を理解するには、浮遊の最も原始的な意味から始める必要があります。 float の本来の意味を太字斜体で上に示しましたが、これは「画像の周りでテキストを折り返すためにのみ使用されるものであり、それ以上のものではありません。」

それでは、なぜ float 属性でテキストが画像の周りを折り返すのかを理解すれば、何がわかるかわかります。フロートの「破壊力」のことです。 //以下の部分はこの記事の核心であり、個人的な意見が多く含まれています。興味があれば、ここでゆっくり読んでください。
まず結論からお話します。フロート属性を含む画像でテキストが回り込む理由は、フローティングによって通常のライン ボックスが破壊されるためです。

最初にラインボックスモデルについて話す必要があります。まず、次の通常の HTML コードを見てください。

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

この HTML コードには 4 種類のボックスが含まれています。

1. まず、p タグが配置されているボックス、このボックスには他のボックスが含まれています。下の図に示すように、

インライン ボックスはコンテンツをブロック単位で表示せず、行単位で表示します。外部タグにインライン属性 (span、a、cite など) が含まれている場合、それらはインラインに属します。ボックスが裸の場合、テキストは匿名のインライン ボックスに属します。

3. ライン ボックス。下の図の注釈を参照してください。

含まれるボックスでは、インライン ボックスが 1 つずつライン ボックスを形成します。これは、フロートがレイアウトに影響を与えるキー ボックス タイプであり、後で詳しく説明します。

4. コンテンツ領域、以下の注を参照してください:

コンテンツ領域は、テキストを囲む非表示のボックスです。コンテンツ領域のサイズは、フォント サイズのサイズに関係します。

画像とテキストの通常の混合配置
デフォルトでは、画像とテキストの混合配置は次のようになります。以下に示すように、画像とテキストはベースラインで揃えられ、画像とテキストは同じ行上にあります。写真:

上の写真では、写真はインラインボックスであり、両側のテキストもインラインボックスです。ライン ボックスの高さは、その中の最も高いインライン ボックスの高さによって決まるため、ここでのライン ボックスの高さは画像の高さになります。現時点では、画像とテキストは同じボックス タイプ (両方ともインライン ボックス) の要素であり、同じ行にあるため、デフォルトでは画像は 1 行のテキストにのみ配置できます。画像を複数行のテキストと揃えるには、通常の行ボックス モデルを壊すしかありません。

フローティング属性を持つ画像とテキスト
まず、float:left スタイルを追加した後の画像のパフォーマンスを見てください。以下の画像を参照してください:

先ほども述べたように、通常の状況では、画像自体はインラインですボックス、両面あり テキスト インライン ボックスを合わせてライン ボックスを形成しますが、フロートに画像を追加すると、状況は完全に変わります。フローティングによって、img 画像のインライン ボックスの特性が完全に破壊されたと思います。少なくとも 1 つ確かなことは、画像のインライン ボックスが悪魔に取り憑かれて変化し、この悪魔がフローティングしているということです。画像がインライン ボックス機能を失うと、インライン ボックス内のテキストと整列することができなくなり、画像は行ボックスから切り離され、独自の方向属性に従って横に並べられます。この状態は、遺伝子鎖（ラインボックス）上に多数の遺伝子（インラインボックス）があり、制限エンドヌクレアーゼ（フロート）がこの配列（フロート要素）を切り出すのとほぼ同じです。 ) 遺伝子鎖から切り離されます。

ラインボックスから分離されたこの浮動要素は、実際には本体、空のシェル、および外観です。インラインボックスがないからです。インライン ボックスがないなら、何が問題になるのかと疑問に思う人もいるかもしれません。いや、いや！このインラインボックスは非常に重要な概念です。高さの性質については「css line-height の詳細な理解と応用」の記事で触れましたが、ここでもう一度説明する必要があります。

現在の CSS の世界では、すべての高さは 2 つの CSS モデルによって生成されます。1 つは CSS の「高さ+パディング+マージン」に対応するボックス モデルで、もう 1 つはスタイルに対応するライン ボックス モデルです。 .「行の高さ」。前者の高さ属性は、明白な高さの値と非表示の高さの値に分けられます。いわゆる非表示の高さの値は、画像が読み込まれると、その固有の高さの値が有効になります。わかりません。「高さ」という言葉。後者は、テキストやその他のインライン ボックスなどの要素を対象としています (画像もインライン ボックスに属しますが、その高さは行の高さよりも強力であるため、インライン ボックスの高さはそれ自体の高さと等しく、行には反応しません) -height) インライン ボックス 高さは line-height によって直接制御されます (これが、line-height テキストが引き伸ばされたり重なったりする理由です)。実際の高さのパフォーマンスは、各行の多数のインライン ボックスで構成される行ボックスです (最も高い内部インライン ボックスの高さに等しい)、これらのライン ボックスの高さが垂直方向に積み重ねられて、含まれるボックスの高さが形成されます。これが、div タグまたは p タグの高さになります。したがって、ライン ボックス モデルの要素には高さはありません。ただし、フローティングは要素のインライン ボックスを直接破壊するため、これらの要素には高さがありません。

私たちが住む世界には、バランスを保つために悪い人々が必要です。格闘技の世界では、とてもすごい鬼を倒したいときに、それに対抗するために鬼の技を練習する人が現れることがよくあるのではないでしょうか？フローティングとは、Web ページの先頭にいくつかの画像のテキストを表示するなどの役割があるようですが、その 1 つは画像の周囲にテキストを表示することです。そんな効果？賢い CSS 開発者は、「魔法のスキル」を実践する float 属性を作成しました。その機能は、画像の周囲にテキストを表示できるようにすることです。それは実現しました。何度も述べたフローティングの意味を思い出してください。フローティングは単に画像の周りにテキストを折り返すために使用されます。これを実現するには、フローティングの「破壊的な」性質を使用する必要があります。

上の図の例に従ってください。フローティングにより画像のインライン ボックスが破壊され、2 つの結果が生じます。1 つ目は、画像がテキストと一緒に表示されず、元の行ボックス チェーンから分離されます。2 つ目は、高さがありません (インライン ボックスがありません)。 > 行ボックスなし - > 高さなし)。これらの結果は、まさにテキストが画像の周囲を囲むために必要なものです。

写真の周りにテキストが表示される理由
まず、以下の Flash アニメーションのデモをご覧ください (ボタンをクリックして開始します):

アニメーションで示されたキーポイントは、実は上記の一連の分析と説明、つまり「ラッピングと破壊」です！ラッピングはラベルが占めるスペースを水平方向に縮小すること、破壊はインラインボックスを破壊することです。上で説明したように、インライン ボックスは高さ形成の基礎です。フローティングによってインライン ボックスが破壊されると、高さはまったくなくなります。実際、フローティング要素にはインライン ボックスがなく、インライン ボックスの高さも存在しないため、他のインライン ボックス要素を再統合してフローティング要素の周囲に配置できます。

ここでは、フローティングによってインライン ボックスが破壊されないと仮定します。そのため、画像は左側に表示されますが、テキストを含む新しい高さエンベロープ (同様の集合体) を形成し、次の行を含むライン ボックスのみを形成できます。テキストやテキストの折り返しは効果が得られないため、インライン ボックスを破棄するにはフローティングが必須です。

理解を助けるために、浮動要素と絶対配置要素を比較できます。フローティング要素と同様に、絶対配置要素にも「ラッピング プロパティ」があり、この「ラッピング プロパティ」はあらゆる要素に適用されます。では、浮動要素と絶対配置要素の違いは何でしょうか?主な違いは、絶対配置要素はドキュメント フローの外にあるのに対し、フローティング要素は依然としてドキュメント フロー内にあることです。また、これによって生じる表示の違いは、同じくドキュメント フロー内にあるテキスト エンティティが重ならないことです。浮動要素。これは絶対に配置された要素と重複します。これは、テキストの折り返しの重要な理由の 1 つです。ピクチャの実際の高さは 0 ですが、幅エンティティ (折り返し) が存在するため、コンテンツ領域エンティティでもあるテキストはそれと重なりません (外部コンテナ)ボックス (p,div,ul,li) を含むボックスはオーバーラップします)、これはバスケットボールのコートに立っている野菜のようなものですが、得点したり、ドリブルしたりすることはほとんど不可能ですが、彼の実体はそこにあり、同じことをブロックすることができます。水平方向の空間。同じ種類の個体（つまり人）は直接通過しますが、通過するには迂回する必要があります。しかし、チーム全体の前進を止めることはできません。下の図を参照してください (firebug 表示のスクリーンショット):