CSS クリアを賢く使用する方法: フロートをクリアするための両方 (コード付き)

ページをレイアウトするときにフロートを使用することがよくありますが、この記事では、フロートをクリアするために clear:both を上手に使用する方法を説明します。それがあなたに役立つことを願っています!

Web ページを作成するときに div css や xhtml css を使用すると、レイアウトは明らかに正しいのに、IE6 で見ると全体像が混乱していることがあります。 IE7 や Firefox では、どう計算してもレイアウトを修正できません。実際、これはすべて CSS の float によって引き起こされます。この問題を解決するには、clear: 両方を使用する必要があります。

CSS マニュアルでは次のように説明されています。この属性の値は、フローティング オブジェクトが許可されない側を示します。この属性は、ドキュメント ストリーム内の float 属性の物理的な位置を制御するために使用されます。

属性が float (float) に設定されている場合、その物理的な場所はすでにドキュメント フローの外にありますが、ほとんどの場合、ドキュメント フローが float (float) を認識できることが期待されます。 float (float) が float の影響を受けないことを願っています。現時点では、clear: 両方を使用してクリアする必要があります。

プログラムコード:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

フロートをクリアする必要がない場合、3列目のテキストは1列目と2列目のテキストと一緒になるため、 3 列目の浮動小数点をクリアします。clear:both;

通常、次のような「浮動小数点のクリア」用に別の CSS スタイルを定義する傾向があります。

プログラム コード

.clear {
clear: both;
}

次に、< div class="clear">

を使用して「浮動小数点をクリア」します。

ただし、

を記述する必要はなく、下位層で直接クリアすればよいという意見に同意しない人もいます。
たとえば、元々は適切だった

プログラム コード

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

は、

プログラム コード

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

に変換する必要があります。ここからは、 view, < ;div class="clear">