CSS系列2-定位2：浮动

CSS中还有一种定位方式那就是浮动float。

浮动早前一般用在img元素上，使文版围绕在图像周围。

如图是没有添加浮动的效果。

给图片添加float:left后

float 属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

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

浮动框同绝对定位类似的是，它也不存在在文档的普通流中，不占据空间，因此会覆盖普通流中的元素。

如果包含框太窄，无法容纳水平排列的浮动元素，那么其它浮动块向下移动，直到有足够的空间。

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

参考资料：

http://www.w3school.com.cn/css/css_positioning_floating.asp

http://www.w3school.com.cn/cssref/pr_class_float.asp