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;
}

次に、1bfe0498b90cca37754770ffe84d5e6816b28748ea4df4d9c2150843fecfba68 を使用して「浮動小数点をクリア」します。

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

プログラム コード

<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">16b28748ea4df4d9c2150843fecfba68本当に書く必要はありません。

しかし明らかに、Web ページをデザインするときに依然として非常に一般的な状況があります:

プログラム コード

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

IE でのページ テストの結果は期待どおりです: 青 2 つあります。赤と黄色のカラー ブロックがあり、カラー ブロックの内側にあり、青のブロックの下に 3 番目のテキストがあります。

しかしFFの効果はこんなものではありません。作業を完了するために次のレイヤーを単にクリアすることはできません。フローティング要素が配置されているラベルが閉じる前に、時間内に次のレイヤーを「クリア」する必要があります。

プログラムコード

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

追加された266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68タグによりIEとFFの高さが変化する場合の解決策は次のとおりです。 :

プログラムコード

clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

プログラムコード

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

以上がCSS クリアを賢く使用する方法: フロートをクリアするための両方 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。