浮动原理：
w3c:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
偶：
（以下以全部设置为float:left;为例）
如果包含框太窄，无法容纳水平排列的几个浮动元素，那么第一个容纳不下的浮动块会带着它后面 的浮动块一起向下移动，直到可以向左移动，则向左移动到边框或另一个浮动框，然后判断是否能容纳第一个浮动块，能则第一个浮动块留在这里，其后面的浮动块继续前面的操作，不能则第一个浮动块和后面的浮动块继续前面的操作。