ホームページ >ウェブフロントエンド >htmlチュートリアル >Css+Div レイアウト学習 (2) Clear_html/css_WEB-ITnose をクリーンアップしますか?

Css+Div レイアウト学習 (2) Clear_html/css_WEB-ITnose をクリーンアップしますか?

WBOY
WBOYオリジナル
2016-06-24 12:33:021077ブラウズ

Css+Div レイアウトを学習しています (1) Div レイアウトの基本的なレイアウト方法は、フッターにあると説明しました。掃除についてまだいくつか言葉がありますので、はっきりさせてください。それについては特別な記事を作成します。

問題を説明するには、前の記事のレイアウト例を使用する方が簡単です:

マストヘッド

サイドバー_a

サイドバー_b

コンテンツ

フッター

このレイアウトの CSS を確認してください:

#Mast頭 { 背景 -色: #CCCCCC; } #サイドバー_a {浮動小数点:左; 背景色:#3399CC; }マージン-ボトム:10ピクセル; 背景-カラー:#ffff00; }

#Footer の clear:both; 属性を削除しても、大きな違いはないようです。次に、レイアウト内の Div の高さを変更するとどうなるかを見てみましょう。

マストヘッド

Sidebar_a

Sidebar_b

コンテンツ

フッター: CLEAR: 両方の属性を削除しました。

このレイアウトは、フットブロックがコンテンツブロックの流れに従うため、両側のフローティングブロックもそれに囲まれてしまうため、見栄えが良くありません。 (私の現在の単語も、Sidebar_b の左側の「周囲」にあるはずです。クリーンになっていないからです。)

Clear 属性には、left、right、both、none の 4 つの値があります。値については何も言うことはありません。なし、最初にクリーンアップしましょう フッターの両面を削除した後、片面をクリーンアップするとどうなりますか?

マストヘッド

サイドバー_a

サイドバー_b

コンテンツ

フッター: CLEAR:left 属性を使用します。

これらのレンダリングにより、このプロパティをよく理解できるはずです。サイドバーが 2 つの場合、フッターでは Clear:both; を使用する方が安全です。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。