ホームページ > 記事 > ウェブフロントエンド > CSSボックスのフローティング(1)_html/css_WEB-ITnose
CSSボックスのフローティング(1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:151263ブラウズ
デモの例として以下のコードを使用します。
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”>body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background-color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ background-color:;margin:15px; padding:10px; } .father p{ border:1px dashed #111111; background-color::#ff90ba; } .son1{ /*这里设置son1的浮动方式*/border:1px dashed #111111; } .son2{ background-color:#6FF; border:1px solid #111111;} .son3{ background-color:#0F6; border:1px dashed #111111; } </style> </head> <body> <div class=”father”> <div class=”son1″>Box-1</div> <div class=”son2″>Box-2</div> <div class=”son3″>Box-3</div> <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p> </div> </body> </html> son1 ボックスを左にフロートするように設定します。コードは次のとおりです
.son1{
/*son1 のフローティング メソッドをここに設定します*/
float:left;
border: 1px 破線 #111111; }
下の図からわかるように、box=2 の背景と境界線は box-1 の位置を完全に占めていますが、box-1 の幅は伸びません。コンテンツを収容できる最小の幅。 box-1 が標準フローから分離されたので、標準フローの box-2 が box-1 の元の位置まで押し上げられ、テキストが box-1 の周囲に配置されます。
box-2 の float 属性を left に設定した後、box-3 が上に向かって走っていることが背景色からわかります。box-1 と box-2 の間のスペースはその余白で構成されています。
box-3 の float 属性を left に設定すると、テキストがフローティング ボックスの周囲に配置されます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。