<!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.前面的div不影响，只是它自己浮动起来后影响后面的div。你可以看成排队，前面一个人到上一层空间去了，后面的人就可以占有她位置。
2.你老师说的对
3.因为dv1是块级元素（默认display是block）。当然dv2是飘不过去了。 block英文是障碍物的意思，很明了了吧
4.“dv1设置display:inline” 就将dv1由块级元素转变成了内联元素，内联元素是不占空间的。所以dv2就可以飘过去了。
你可以看看下面这个帖子的第6和22课。
http://bbs.csdn.net/topics/390648164
百度一下：内联元素与块级元素的区别
具体看看http://bbs.csdn.net/topics/390648164 这个里面的第六课
谢谢，基本明白了，问下你这个3D图是怎么弄出来的？自己画的吗？
