ホームページ > 記事 > ウェブフロントエンド > CSS におけるフローティングとクリーニングの簡単な分析

CSS におけるフローティングとクリーニングの簡単な分析

巴扎黑オリジナル: 2017-04-15 09:05:241305ブラウズ

フロントエンドとして、私は多くのページレイアウトを作成してきましたが、フローティングは常に理解できない盲点でした。一方で、フローティングは多くのレイアウトを実現するために使用できますが、その一方で。、フローティングの影響によりレイアウトが破壊され、頭痛の原因となるため、今日はこの盲点に対処するために特別にブログ投稿を書きました。

この記事では主に次の問題について説明します:
1. フローティングの本来の目的
2. フローティングにテキストの折り返し効果がある理由

フローティングの本来の目的

以下の内容は、Zhang Xinxu「CSS float の徹底した研究、詳細な説明と拡張 (1)」からのものです:

CSS に float 属性がないと仮定すると、それはどのようになりますか?現在フローティングメソッドを使用して一般的に実装されている列のレイアウトやリストの配置であっても、他の CSS プロパティ (テーブルに関係なく) を使用して実装できることがわかります。実装できないのは「画像の周囲のテキスト」だけです。画像の周りにテキストを折り返す方法が思いつきません。そう、このかけがえのない役割こそがフロートの本当の意味なのです。

これを一言でまとめると:

画像の周囲にテキストを回り込む効果を実現します。

なぜフローティングにはテキストの折り返し効果があるのですか?

この質問は主に過去の印象から来ています:

フローティング要素はドキュメントフローから分離されています。

え？ドキュメントフローから外れても、下のフローティングされていない要素と重なっているはずではありません。なぜテキストが回り込んでしまうのでしょうか?

「Mastering CSS」という本を見るまで、この問題に悩まされていました。記事には次のように書かれています:

フローティングにより要素はドキュメントフローから外れ、非フローティング要素には影響を与えなくなります。実際には、完全ではありません。フロート要素の後にドキュメントフロー内の要素が続く場合、この要素のボックスはフロートがまったく存在しないかのように動作します。ただし、
ボックスのテキストコンテンツはフロート要素の影響を受けてスペースを空けるために移動します。 言い換えると、
フローティング要素は確かにドキュメントフローから分離されているため、ドキュメントフロー内のブロックボックスはフローティング要素を無視しますが、テキストは

しません。これは、ドキュメントフローからの絶対的な配置とは異なります。

Zhihu に関する Zhang Qiuyi シニアの回答も、この見解を裏付けています。

追加点: ドキュメントフローという用語は実際には不正確です。W3C 標準では通常のフローしかありませんが、多くの国内の記事や翻訳本ではドキュメントフローが使用されます。

フローティングの影響をクリーンアップする方法

実際、フローティングの主な影響は

1. 要素が通常の流れから離れるため、親要素の高さが崩れます

2.以下はフローティング要素と重なり、元のレイアウトを破壊します

これらの効果をクリーンアップするには、clear 属性を使用する必要があることを多くの人が知っています。なぜクリアフロートをクリアできるのでしょうか?

2 つの意見があります:

1. ブラウザは

クリア要素の上に十分な余白

を追加し、要素の上端がフローティング要素の下端の余白よりも垂直に下がるようにします。
2.マージン自体は変更しませんが、クリア要素の上マージンの上にクリアスペースを追加します。
前者はCSS1とCSS2の実装原則であり、後者はCSS2.1の実装原則です。しかし、どちらが達成されても、浮遊要素のために垂直方向のスペースが残され、浮遊効果が解消されるように見えます。同時に、設定されたクリア要素の上に埋められたスペースは、実際には通常のフロー内に存在します。したがって、親要素の高さは引き伸ばされます。

フロートをクリアする方法は実際にはたくさんあります。「あの頃一緒にクリアしたフロート」の記事では、フロートをクリアする方法を簡単に 2 つのカテゴリに分けています。

1 フローティング要素の最後に空の要素を追加して、clear:both 属性を設定します。 , after 疑似要素は実際には、要素の背後にあるポイントコンテンツを持つブロックレベルの要素をコンテンツを通じて生成します。

2. 親要素の overflow または display: table 属性を設定してフロートを閉じます。

フロートをクリアするほぼすべての方法は、次の 2 つのカテゴリに要約できます。上記のブログ投稿と併せて、疑似要素を追加する方法について説明します。

1.display: block、生成された要素が次のように表示されるようにします。ブロックレベル要素、残りのスペースを占有します。

2. この文字は非常に小さいため、コンテンツにドットを追加します。

3. この新しいコンテンツがスペースを占有し、レイアウトの高さを壊したくないため、高さを 0 に設定します。

4. 可視性を非表示に設定して、生成されたコンテンツを非表示にし、生成されたコンテンツで覆われている可能性のある部分をクリックしてインタラクティブにできるようにします。
5.clear: どちらもフローティングの効果をクリアします

コードは次のとおりです:

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

この方法は、ほとんどの最新のブラウザで効果的であり、推奨されます。その他の方法については、オンライン上にたくさんあるので、ここでは詳しく説明しません。

この記事は他のブログやドキュメントを参考にしており、リンクも添付されています:

参考リンク:

CSSクリアプロパティ

CSS float

CSS floatの理解とfloatのクリア

当時一緒にクリアしたfloat

noraml フロー

CSS float の徹底した調査、詳細な説明と拡張 (1)

Zhang Qiuyi の回答