浮动

浮动定位是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