浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘

当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，
但是会缩短行框，产生文字环绕的效果

            

 
 
<style type=“text/css”>
#style1 { float: left;}
</style>

浮动框覆盖了普通文本流中块框的部分边框和背景，但行框缩短给浮动框腾出空间

  
三个box都浮动了，向左浮动直到碰到前一个浮动框
 

如果水平位置没有空间了，则box3会跑到下面去
  
如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住