How floats are positioned

      
Floats Example
      

      

      

      
In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, 
      
Floats example2

#square1,#square2,#square3{
    background-color: red;
    width: 120px;
    height: 120px;
    margin: 10px;
 }
  #square1,#square2{
    float: left;
  }
  #square3{
    float: right;
  }
  .se{
    background-color: blue;
  }
   h1{clear: both;}

3.jpg

float是真的飘起来了，所以小方块中间可以插入文字，对下方的元素需要清除浮动才不会显示到红方块中间。