Try it Live

<!DOCTYPE html>
<html>
 <head>
 <style>
 
  .left-float1 {
    width:200px;
    height:50px;
    border:3px solid blue;   
    float:left;
    padding: 2px;
    margin:0 5px;
  }
  
  .right-float1 {
    width:200px;
    height:50px;
    border:3px solid orange;   
    float:right;
    padding: 2px;
    margin:0 5px;
  } 
 
  #clear-both {
     clear:both;
  }
 </style>
 </head>
 <body>
   <h3>Without clear:both applied on a successor</h3>
     <span class="left-float1" >
       The Left float predecessor
     </span>
     <span class="right-float1" >
       The right float predecessor
     </span>	
     <p>
       When clear:both is NOT applied on the successor, then this successor(i.e. this paragraph tag) will NOT move down against both its predecessor element(span tag) on which left & right float is applied. So, this paragraph tag will surround around left & right floats.
     </p>
   <h3>With clear:both applied on a successor</h3>
     <span class="left-float1" >
       The Left float predecessor
     </span>
     <span class="right-float1" >
       The right float predecessor
     </span>	
     <p id="clear-both">
       When clear:both are applied on the successor, then this successor(i.e. this paragraph tag) will move down against both its predecessor element(span tag) on which left & right float is applied. So, this paragraph tag will not be beside them rather it will be below them.
     </p>	
 </body>
</html>