How floats are positioned

      <h2>Floats Example</h2>
      <div id="square1"></div>
      <div id="square2"></div>
      <div id="square3"></div>
      <div class="se">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, </div>
      <h1>Floats example2</h1>

#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;}

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