一个盒子，绿色的是个div“正常元素”，下面蓝色的是个p标签。（代码在最后）
这时，设置下面的p标签，float:right。运行结果如图：
请问：浮动元素不是脱离文档流，尽量向上浮动吗，为什么蓝色的“右浮动”，好像只是浮动到了它所在行的最右边，而不是整个盒子的右上角呢？求解惑！谢谢！
下面是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{width:200px;height40px;
border:2px solid orange;
margin:50px auto;
}
.box div{
background:lime;
height:30px;
}
.box p{background:aqua;float:right;
}
</style>
</head>
<body>
<div class="box">
<div>正常元素</div>
<p>右浮动</p>
</div>
</body>
</html>正常元素这个div占了box所有宽度，p就算浮上去也要掉下来，试着给div和p一个宽度吧，两者加起来不大于父div
position...
跑去读完w3c规范文档后过来回答。如下：
w3c在描述脱离文档流（out of flow）这个概念的时候，只将绝对定位（属性position为fixed或absolute）描述为完全脱离文档流（removed from the normal flow entirely），而浮动（属性float为left或right，且不为绝对定位）并没有这样表述。也就是说，浮动不是完全脱离文档流的。
这是什么意思呢？
一方面，浮动元素可能影响文档流。浮动很本源的一个设计，是这样的文字环绕的图文排版：
虽然这个效果很常见，但请注意这些文字其实都是文档流内的，属于普通流（normal flow），如果所谓的“脱离文档流”就是跟文档流毫不相干的话，这些文字怎么会特意为浮动元素留下空间呢？
另一方面，浮动元素可能被文档流影响。w3c是这样描述浮动的：
In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
可以看到，浮动的效果并不是完全的脱离文档流，而是先基于文档流取得一个位置，然后再向左或向右移动。在题主的例子里，在浮动元素之前有一个普通流的块元素。浮动元素的精确特性规则中有这样一条：
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
这句话的意思是，浮动元素不可以高于任何在源文档（html代码）之前的块元素或浮动元素。这也是说，浮动元素的上边缘位置，是要考虑在它之前的块元素或浮动元素的。再回到题主的例子，那个“正常元素”属于在浮动元素之前的块元素，因此那个“右浮动”在浮动位置时，会把在它之前的块元素也考虑在内，所以就会从块元素的下一行开始。
按照前面的“先基于文档流取得一个位置”的解释来理解，也可以得到这个结论。 一般说的“浮动元素不占用普通流元素的布局位置”，还需要更准确的描述一下：普通流取位置时不考虑在它之前的浮动元素（就当它们不存在），但浮动元素取位置时是会考虑在它之前的普通流块元素的。
希望有所帮助。
题目的问题可以简述成: 对元素使用float:left后使其脱离文档流，却没有让元素与元素之间产生堆叠。
首先题主要清楚文档流的概念
文档流是文档中可显示对象在排列时所占用的位置。
脱离文档流就是改变了元素原有排列的位置, 不同的样式造成的效果是不同的
1> float: left|right 使元素向左|右浮动至父元素的最边上或是贴到同样是浮动元素旁边。
2> position: absolute 形成堆叠上下文，有层叠的效果
综上所述:浮动脱离文档流的表现不会与周围形成层叠上下文，也就不会有层叠的效果。
我在一篇文章里看到,大概理解脱离文档的意思是 脱离了父元素
<div class="parent">
<img src="xxx.jpg"/>
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
<div/>审查元素可以看到 parent 塌陷了
详情点击这篇文章
因为你的上一个兄弟元素有100%父元素宽度，float是块状元素浮动，上面已经被div块占了，所以紧随的p块在剩下区域内浮动，俄罗斯方块玩过吧，当一块被占了，下一块只能在剩下的空间填充。
如果你想p块移动到右上角有两个办法：
1.使用position属性
2.在新的层（比如楼上说的clear，或者z-index）浮动，这也是一个思路
简单地说，浮动不影响上一行。
上一个元素如果是块级元素默认宽度是100%，浮动元素从新行开始。
设置宽度或者改变display为inline或inline-block如果剩余宽度够的话就会浮动在右边。
把p标签放在div标签之前而且div没有clear:both或clear:right右浮动就会出现在盒子右上角了。