当前面的元素是内联元素时？ 后面的float元素怎么会在内联元素的前面去呢 ？

Question

如题所示：

<span></span><div style='float:left'></div>

还有个问题就是： css选择器能否向上取同级的元素吗 ？

div~span{} //取不到. 有没有向上取的 ？
<span></span>
<div></div>

Answer 1

1. div元素自带float属性，也就是产生了BFC，而BFC有一条很重要的特点，就是他排列的时候，会跟最左边的边线接触
   W3C关于BFC的说明

2. 没有向上取的

Answer 2

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

所以float为left的div会挤开/无视span贴到父级的左边界，而行框(span)不同于块框，是会识别脱流的浮动框并围绕着它

Answer 3

我个人理解就算你浮动了，元素虽然改变了，但是实际的元素又没有改变，span~div{}//就能去得到，css本身就没有向上选择。

Answer 4

照搬一些内容过来：

一个浮动的盒子会向左或者向右偏移，直到遇到了他的包含块的边界或者另一个浮动元素的外边界。如果有一个行盒存在，那么浮动盒的外顶部会和当前的行盒的顶部对齐。
如果在水平方向上没有足够的空间浮动的话，他就会向下移动，直到有足够的空间或者没有更多浮动存在。
由于浮动不在普通流中，在该浮动盒之前或者之后的非定位块盒垂直排列就如同浮动不存在一样。然而，浮动盒之后创建的行盒为了给浮动盒提供空间而缩短。
如果被缩短的行盒太小了以至于不能包含任何内容的话，那么这个行盒就会下移，直到有足够的空间或者没有更多的浮动存在。在当前行浮动盒之前的内容都将被重排到浮动另一边相同的行里。换句话说，如果在一行中，行内级盒在一个左浮动之前（同时左浮动也被放置在当前行），剩余的空间能够放下这个行内级盒的话，他就会和当前行盒的顶端对齐，并且在这一行的的行内级盒将会移动到这个浮动的右边；反之亦然，对于rtl和右浮动框也是一样的。

这里应该可以解释你这里遇到的情况了，之前的span元素会默认生成一个行盒，后边跟着浮动的div，很明显，规范中说的很详细了。
参见 http://blog.aijc.net/css/2014/08/06/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%... 中关于“浮动”部分。

这里还涉及到的是选择器的问题，其实你的说法“向上”是不对的，span和div是同级的，他们是兄弟间关系；那关于“css选择器能否向上取同级的元素吗 ？”也就等于“css有能匹配到前一个同级元素的选择器吗 ？”，答案是没有。同级的有两个，+和~