关于css设置float后的div块碰撞问题_html/css_WEB-ITnose



1、如果给dv2设置float，是不会挤动上方的div的，但是下方的div却会挤到上面来，这是为什么呢？

2、我老师说下面的div挤上来是因为float之后的dv2会浮到前面来，也就是不跟dv3在同一个平面了，所以留下一个空的位置，下方的dv3就顶到了这个空位上，这个说法正确吗？

3、如果是这样的话，那dv2已经浮到了前面来，那么跟dv1也不在一个平面了，为什么不会浮动到最左上角呢？都不在一个平面了为什么会被上面的dv1顶住上不去呢？

4、另外如果把dv1设置display:inline，设置为行内元素，dv2又会挤到最左上角，并且把dv1挤到右侧，按我老师的说法，既然都不在一个平面上，为什么dv1会被dv2挤开呢？

求大牛们解答，谢谢！！！

回复讨论(解决方案)

1.前面的div不影响，只是它自己浮动起来后影响后面的div。你可以看成排队，前面一个人到上一层空间去了，后面的人就可以占有她位置。
2.你老师说的对
3.因为dv1是块级元素（默认display是block）。当然dv2是飘不过去了。 block英文是障碍物的意思，很明了了吧
4.“dv1设置display:inline” 就将dv1由块级元素转变成了内联元素，内联元素是不占空间的。所以dv2就可以飘过去了。

你可以看看下面这个帖子的第6和22课。
http://bbs.csdn.net/topics/39081

百度一下：内联元素与块级元素的区别




具体看看http://bbs.csdn.net/topics/39081 这个里面的第六课

谢谢，基本明白了，问下你这个3D图是怎么弄出来的？自己画的吗？

谢谢，基本明白了，问下你这个3D图是怎么弄出来的？自己画的吗？

用cdr画的，熟悉的话很简单。