css浮动规则不解

Question

如图所示 a,b,c都是浮动元素b比a高，我不大理解为什么c的顶部会在b的下方，而不是往上浮动到贴紧a
按照http://www.w3help.org/zh-cn/k...这里的现象也没有找到对于的细则，求解释

Answer 1

我觉得你可以这么理解，C之所以下去了是因为没有足够的水平空间，但C要下去有B挡着没法逃，所以C需要向下移动一个B的高度才能逃的掉，逃掉之后会立刻贴住左边因为是向左浮动，但不会再次调整上下因为已经逃掉没啥关系了。这个有点像是星爷的大内密探零零發在外星人解剖场搞掉无面孔人儿子那段，磁石在哪它飞哪，Pia的一下就贴上了哪管什么姿势啊。同样的，如果A比B高，那么C还是会向下移动个B的高度然后向左逃逸，只不过会被卡在A的脚上紧贴B的下部，但同样因为已经达到“逃逸”的目的了，所以不会发生再往下挪再去以便能贴住左边框这种事。

Answer 2

这个问题。。有点难以解释。
从这么个方向去理解：
float是改变了元素的排列方式，从原来的从下到上，变到了从左到右(float:left)，那么这些元素的父元素假如能够被撑开，那么其高度一定是由这一排的最高的元素决定的。那么假如有元素一排不足以放置，产生了换行，可以理解为这里产生了行高(line-height:喵喵喵???)，具体就是展示为一行的float元素占据了height为最高元素高度的空间。
虽然假设了这么多，但是最根本的可能还是css渲染(语言)设计上面的考虑吧。。

Answer 3

float 属性定义元素在哪个方向浮动，同个方向的浮动，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，而且在同一行中，高度是由最高的元素决定的，明显abc都是向左浮动，a,b在同一行，这行高度由b决定，c属于另外一行

Answer 4

先引用规范

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

上面我链接的那篇文章有对这个的翻译

如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。

按照这条规范理解的话，源文档中c在b后面，3个元素都左浮动，所以c要么在b的右边要么在b的下边，b右侧没空间，所以只能在b下面。如果c贴紧a的话，那么就跑到了b底部的上方就不符合规范了

Answer 5

就在你给的链接里面，看的不仔细吧：

2. 浮动框的定位受同向浮动框的影响

如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。

也就是说，当前浮动框的定位会受到先前生成的同向浮动框的影响，它们不能相互遮盖。当前浮动框需要紧挨着先前同向浮动框的外边界进行定位，如果当前行空间不足，则折行，放置到它之前浮动框的下面。