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;}
How floats are positioned_第1张图片
3.jpg

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

你可能感兴趣的:(How floats are positioned)