浮动定位是css排版中非常重要的手段。浮动的框可以左右移动，直到外边缘碰到包含框或另一个浮动的边框。因为浮动框不在文档的普通流中，所以文档流中的块框表现的像浮动框不存在一样。
float的属性：
none 不浮动 默认
left 左浮动 文本或图像会移至父元素的左侧
right 右浮动 文本或图像会移至父元素的右侧
普通文档流的css样式如下：
#box{width:650px; border:solid;/*边框实线*/}#left{
background-color:red;height:150px;width:150px;margin:10px;
}#main{
background-color:greenyellow;height:150px;width:150px;margin:10px;
}#right{
background-color:pink;height:150px;width:150px;margin:10px;
}效果如图
当把left向右浮动时，它将脱离文档流并且向右移动，直到其边缘碰到包含框你box的右边框为止
在left DIV中添加float:right;//设置右浮动
右浮动效果
当把left框向左浮动时，它将脱离文档流并且向左移动，直到其边缘碰到包含box的左边框为止。因为不在处于文档流中，所以它将不占据空间，实际上覆盖了main框，使main框从左实图中消失。注意看第二个框内文字有重叠
在left DIV中添加float;left;//设置左浮动
左浮动效果
当把3个框都向左浮动时，left框将向左浮动直到碰到box的左边框为止，另外两个框向左浮动直到碰到前一个浮动框为止
3个框都左浮动
上图可知box包含框太窄，无法容纳水平排列的3个浮动元素，那么其他浮动框将下移动，直到有足够的空间
作者：DivMa
链接：https://www.jianshu.com/p/d683e5775717