ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnoseでfloat設定後のdivブロックの衝突問題について
css_html/css_WEB-ITnoseでfloat設定後のdivブロックの衝突問題について
- WBOYオリジナル
- 2016-06-24 11:56:591143ブラウズ
<!doctype html><html> <head> <meta charset="gb2312"/> <title></title> <style type="text/css"> * { margin:0;padding:0; } #dv1 { border: 1px solid red; width: 400px; height: 300px; } #dv2 { /*display:inline; dv3加浮动，dv2不会被挤开，是因为dv3只是停留在它那一行，没有影响到文件流，但是为什么把dv2设置成行级元素就会被下面的dv3挤开呢？？*/ float:left; width: 200px; height: 200px; border: 1px solid green; } #dv3 { width: 400px; height: 100px; border: 1px solid blue; /*position:absolute;*/ } </style> <script type="text/javascript"> </script> </head> <body style="font-size:20px"> <div id="dv1"> 我是dv1中的文本 </div><div id="dv2">我是dv2中的文本</div><div id="dv3">我是dv3中的文本</div> </body></html> 1. dv2 に float を設定すると、上の div は絞られないのに、下の div が一番上に絞られてしまうのはなぜでしょうか。
2. 先生は、下の div が押し上げられるのは、float の後の dv2 が前に浮く、つまり dv3 と同じ平面上にないため、空の位置が残り、下の dv3 が押し上げられると言いました。空いた席で、この発言は正しいですか？
3. この場合、dv2 は前面に浮いていて、dv1 と同じ平面上にありません。なぜ左上隅に浮いていないのでしょうか。同じ平面上にいないのに、上記の dv1 によってブロックされるのはなぜですか?
4. さらに、dv1 を display:inline に設定して inline 要素として設定すると、dv2 は左上隅に、dv1 は右隅に圧迫されます。先生によると、それらはそうではないためです。同じ平面上にあるのに、なぜ dv1 があるのですか。 dv2 によって絞り出されるのでしょうか?
いくつか答えてください、ありがとう！ ！ ！
ディスカッションへの返信 (解決策)
1. 前の div は影響しません。フロート後の後続の div にのみ影響します。これは、前の人が上のスペースに行き、後ろの人が彼女の代わりをすることができるキューと考えることができます。
2. 先生の言うことは正しいです
3. dv1 はブロックレベルの要素であるため (デフォルトの表示はブロックです)。もちろん、dv2 はフロートスルーできません。ブロックは英語で障害物を意味します。非常に明白ですよね?したがって、dv2 はフロートオーバーできます。
以下の投稿のレッスン 6 と 22 をご覧ください。
http://bbs.csdn.net/topics/390648164
Baidu: インライン要素とブロックレベル要素の違い
http://bbs.csdn.net/topics/390648164 をご覧ください。レッスン 6
ありがとう、この 3D 画像はどうやって作ったのですか?自分で描いたんですか？
ありがとう、大体わかりました。この 3D 画像はどのように作成しましたか?自分で描いたんですか？
cdr で描画されており、慣れていれば非常に簡単です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。