写在最前
本次记录一段突然令我困惑的css代码。主要是由于css一直掌握的不好同时突然出现了一种很常见的浮动情况但是并不能用已有的认知来解释，故从规范中寻找答案。
欢迎关注我的博客，不定期更新中——
MDN对于浮动的解释
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
主要关注三点：
- 浮动元素沿容器左侧或右侧放置
- 文本内联元素环绕
- 脱离文档流，但仍保持部分流动性。
看完这段话我其实还是有困惑的。主要的困惑是“部分流动性”怎么讲？不是已经脱离文档流了么？按照之前我对float的理解，我认为一般浮动是两种情况：
<div class="red left"></div>
<div class="green"></div>
<div class="red left"></div>
<div class="green">As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</div>
</body>
这就是我之前对于关于浮动定义出的特性所理解的关于“脱离文档流”以及“文字环绕”的理解。至于“保持部分流动性”这种东西我以为离我很远我也就没有在意。直到。。
令我手足无措的非常简单的一段代码。。
<div class="left"></div>
<div class="center">
some content fits or there are no more floats present.
</div>
image
这是一段很平常的代码。。浮动元素脱离文档流，下面的元素不认识它了就顶替了它的位置，同时文字可以识别，故有了环绕效果。
当我把这两个元素倒置了一下之后。。
<div class="center">
some content fits or there are no more floats present.
</div>
<div class="left"></div>
image
我一直的理解都是，浮动元素脱离了文档流！但是为什么现在没有出现在顶点呢？而这也正是我之前对于MDN解读中遗漏的一小部分导致的。（其实我认为是MDN没说清楚。。那么写愚钝的我并没不能反应过来是什么意思。）
对于浮动的定义我遗漏了什么
though still remaining a part of the flow (in contrast to absolute positioning).
其实文档中已经说的很明确了。我遗漏了浮动的部分流动性。而这部分流动性到底是什么？来看下我找了“很久”的规范怎么说：
00dcc902-0103-41f1-9881-006f4bf6da13
规范中对于浮动的定义比MDN多了些什么？顺序！来看下规范里提到浮动元素如何定位：
- 先根据正常流进行布局
- 脱离文档流，并向左或向右顶到头
我遗漏的关键点就在于：部分流动性指浮动元素会先按照正常流进行布局。
从而可以知道之前下图这样的结果是为什么了。
image
因为浮动元素是先根据normal flow进行布局，再脱离文档流。脱离之后只能向左或者向右了。确实那个时候上面的元素不认识浮动元素了，但是浮动元素已经定位过了，只能左右动。
小结
至此我们就可以知道，浮动元素确实脱离了文档流，但其和绝对定位不同的地方在于的部分流动性指的是，它会先根绝正常文档流进行布局。之后再脱离文档流，自由翱翔。不像绝对定位，你文档流爱谁谁，我只关心上级的relative/absolute在哪里：）
参考资料
最后
惯例po作者的博客，不定时更新中——
有问题欢迎在issues下交流。
网友评论