about float

[teazean]

关于 float 的放置规则：https://www.w3.org/TR/CSS22/visuren.html#propdef-float

总之就是：向左浮动的尽可能像左靠，向右浮动的尽可能向右靠。靠上要优先于靠左或靠右

看 case demo: https://codepen.io/teazean/pen/WzoJyK

[teazean]

https://www.w3.org/TR/CSS22/visuren.html#floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

在『float 元素』之前或者之后创建的『block 元素』在布局时是认为『float 元素』不存在的；但是该『block 元素』中的『line box』会尽可能的缩短以适应『float 元素』的边缘。

[teazean]

https://www.w3.org/TR/CSS22/visuren.html#floats

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

不同于上一条，『BFC 元素』不能与『float 元素』重叠。当『float 元素』后面跟着『BFC 元素时』，有两种结果：

1. 如果与『float 元素』水平相邻的空间能够放置『BFC 元素』，则将『BFC 元素』放置在『float 元素』水平相邻的剩余空间。
2. 如果与『float 元素』水平相邻的空间不够放置『BFC 元素』，则将『BFC 元素』放置在『float 元素』下面。

demo：https://codepen.io/teazean/pen/XEoeQV