cssのfloatとclear

3159 ワード

html css

http://www.w3school.com.cn/css/css_positioning_floating.asp
フローティングボックスは、ボックスまたは別のフローティングボックスを含むフレームに外縁がぶつかるまで、左または右に移動できます.
フローティングボックスはドキュメントの通常ストリームにないため、ドキュメントの通常ストリームのブロックボックスはフローティングボックスが存在しないように表現されます.
同じです(次のテキストストリームはこのフローティングブロックの周りを囲みます).
floatプロパティを使用する要素はブロック要素とみなされます(インライン要素もブロック要素になります)
1つ目のブロックが浮動して2つ目のブロックを覆った.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
	<style>
		p{
			width:100px;height:100px;margin:0px;border:1px solid #fff;
		}
		.p1{
			background-color:#339900;float:left;
		}
		.p2{
			background-color:#FF9966;
		}
		
	</style>
	
	
    </head>
    <body>
		<p class="p1"></p>
		<p class="p2"></p>
    </body>
</html>

でもp 1もp 2も内容があると違う

 <body>
		<p class="p1">box1</p>
		<p class="p2">box2</p>
    </body>

でももし

box 2

をbox 2に変更
どんな効果があるか見てみましょう
まとめ:フローティングされたブロックは次の非フローティングブロックを覆いますが、次の非フローティングブロックの文字と画像は覆いません.
      次のブロックは幅が足りないと、その中の内容が下に押し出されます.次のブロックの内容を右側に示すには
    下のブロックの幅を広くします.
    次の非フローティングブロックもフローティングさせます
   floatプロパティを使用する要素はブロック要素とみなされます(インライン要素もブロック要素になります)
フローティングブロックはドキュメントストリームに空間を占めません.firebugではidが「container」の親div要素の高さが0であることがわかります(container要素に背景色を設定することでcontainer要素の大きさを表示できます.ここでは高さが0であるためです(containerはフローティングブロックを含み、フローティングブロックには幅が広い設定があります).
floatとclearは、floatブロックが親空間に立たないため、親ブロックの枠線にフローティングブロックが含まれない解決策を参照してください.
一、clearの使用

<style type="text/css">
#main {background-color: #3399CC;}
#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>

二、親ブロックスタイルにoverflow:autoを書き込む

<style type="text/css">
#main {background-color: #3399CC;overflow:auto;}
#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>

追加された

タグによるIEとFFの高さの変化は、以下の方法で解決される.

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

別の例は添付ファイルを参照してください.

PIDアルゴリズムのインクリメンタル制御温度

Mvc快速開発