float在行内元素和在块级元素不同表现

         一直以为float就是脱离文档流那么简单，自己写了些测试代码，发现水这么深尼玛，一句话，慎用float。

       在块级元素中使用了浮动元素，如3个div，第一个div浮动，后面两个div会往上挤，就当上面的div不存在一样，这时候，浮动元素后方的div会钻到浮动元素下面，显示就是被浮动元素遮挡了。真的就那么简单了吗？

当我在浮动元素后面的非浮动元素中加了一些文字啊<span>啊，诡异的现象出现了，虽然和浮动元素相邻的非浮动元素还是会钻到浮动元素下面，但是文字等行内元素不会！他们会被留在浮动元素外面，表现上是环绕着浮动元素的效果。

说完现象，说说原理，查了不少资料，靠谱的没几个，肯定的是float会把inline box毁掉造成高度塌陷云云，但这不是这个问题的答案，为什么文字会环绕，但是div不会呢？

       一个靠谱点的说法是，float不会占据和他相邻的非浮动元素，但是会占据和他非相邻浮动元素里面的inline box空间，就是说会把里面的东西挤出来，但是会覆盖那个元素本身如背景啊边框啊神马的。再往里的原理深究起来很啰嗦，拿点别人的东西过来，不过记住这个特性是很重要的。

http://www.langyuweb.com/a/jishuzhongxin/lanmu2/2011/0802/1832.html

http://www.cnblogs.com/zhupinglei/archive/2012/05/09/2493396.html