div内一个浮动div（在前），一个标准为当流div（在后），浮动div会产生占位？

Question

同一div内的两个div，其中float:left;如果在前面，那么会产生占位。    why？我感觉应该是两个div的内容进行重叠，可为什么没重叠，而第一个div float:left;还占位了？<div id="one" style="width:500px; height:30px; border:1px solid black;">    <div id="lfInOne" style="float:left;width:100px; height:30px; background:yellow;">float的内容</div>        <div id="inOne" style="width:500px; height:30px;">标准文档流的内容</div>        </div>

Answer 1

float是针对元素的浮动定位，并不是绝对定位，如果你的float改成position：absolute，那么两个元素就是重叠；

float浮动后，元素本身还是要占据父元素内的空间的，就比如说，你桌子上有两个笔记本，其中一个向左边靠，另一个没有给他位置，可以随意的，那么向左的那个本身还是占据了桌子的空间；

那么讲解下position定位；position定位常用的三种；

1、relative，相对定位；相对定位只根据父元素的位置定位，一般默认是在父元素下面没有任何样式，可以自己规定相应的样式；

2、absolute，相对于父元素的绝对定位，这是定位一般用在元素内需要进行绝对定位的元素，（如：我想把一个图片绝对定位到元素内的左下角，一般这样写:img{position:absolute;right:0;bottom:0;}）注意的是，元素使用绝对定位后，那么它的父元素需要进行一次相对定位，不然绝对定位的元素是以body（也就是整个网页）来进行定位的；

3、fixed，相对于浏览器窗口来定位；这个定位一般用到的地方，如网页右侧的联系弹框，返回顶部，分享等；

怎么使用呢？

样式（以类名为top为例）：.top{positon:fixed;left:0;top:100px;}表示：元素显示在浏览器的最右边，距离顶部100px的距离；

Answer 2

1、div本身

2、div的内容

你要区分清楚这两者的区别和联系。

div本身是互相重叠的，而div的内容没有重叠

你可以给div id="lfInOne" 和 div id="inOne" 两个盒子分别加上不同颜色的边框，就能直观看到。

而div里面的内容，因为你设置了float，规定第一个盒子的内容向左面流动，所以就没有重叠。

参考2楼，你可以将：

float：left 改成 position:absolute

或者改成 position:relative

看看三者的区别。

希望能帮到你，我也是初学者。

Answer 3

float 的元素的后面的元素会跟在后面， 如果 当前行 的剩余空间 小于 后面元素的宽度，， 后面元素就会换行