Question

在CSS中对元素使用了浮动，然后再使用相对定位的问题

依次定义了div1,2,3三个div元素，并且对3个div均使用float:left使之向左浮动，如下图：

然后，对div1使用相对定位，即对div1加上position:relative;left:300px代码，图就变成了这样：

div2之前的空位就是div1进行相对定位之前的位置，根据相对定位的定义，这样的结果似乎没什么问题。但是我有一个疑惑，不是说对div进行浮动后就会脱离文档流吗，那么使用相对定位的话，相对定位的起点就已经脱离文档流了啊。那么按照个人理解，div2的前面不应该有空白，也就是说不应该为脱离文档流的div1留出空位啊。但是结果却留出了空位，有谁知道为什么吗？





Answer 1

相对定位的特点就是占着马桶不拉屎，就是说它相对它本来的位置偏离了一定距离以后，它去了别的地方，但是它原来待的地方也是不会让出来的，你3个div浮动以后，就变成了图1的样子，那么3个div自己的位置已经确定，那么不管是div1也好，其他div也好，用相对定位跑到隔壁家去玩也好，跑到天涯海角也好，它家里的位置还是占着不让别人去的，仿佛它不曾离开。