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

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

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

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

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

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

フローティングにより要素はドキュメント フローから外れ、非フローティング要素には影響を与えなくなります。実際には、完全ではありません。フロート要素の後にドキュメント フロー内の要素が続く場合、この要素のボックスはフロートがまったく存在しないかのように動作します。ただし、

ボックスのテキストコンテンツはフロート要素の影響を受けてスペースを空けるために移動します。 言い換えると、

フローティング要素は確かにドキュメントフローから分離されているため、ドキュメントフロー内のブロックボックスはフローティング要素を無視しますが、テキストは

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

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

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

1. ブラウザは

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

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

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

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

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

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

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

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

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

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

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

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

フローティングにより要素はドキュメント フローから外れ、非フローティング要素には影響を与えなくなります。実際には、完全ではありません。フロート要素の後にドキュメント フロー内の要素が続く場合、この要素のボックスはフロートがまったく存在しないかのように動作します。ただし、

ボックスのテキストコンテンツはフロート要素の影響を受けてスペースを空けるために移動します。 言い換えると、

フローティング要素は確かにドキュメントフローから分離されているため、ドキュメントフロー内のブロックボックスはフローティング要素を無視しますが、テキストは

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

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

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

1. ブラウザは

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

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

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

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

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

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

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

以上がCSS におけるフローティングとクリーニングの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。