Try it Live

<!DOCTYPE html>
<html>
 <head>
 <style>
  .main-rf1, .main-rf2  {
    padding:10px;
    width:410px;
    border:8px solid yellow;
  } 
  .right-float {
    width:150px;
    height:50px;
    border:3px solid aqua;   
    float:right;
    padding-left: 5px;
    margin:0 5px;
  }  
   .right-float-img {
     width:190px;
     height:180px;
     border:1px solid aqua;   
     float:right;
     padding-left: 2px;
     margin:0 5px;
  }
 
 </style>
 </head>
 <body>
 <div class="main-rf1">
   <p>
     <span class="right-float" >
       The float is right.
     </span>
     The span adds float:right to move itself to the right of this paragraph. If the length of the paragraph will be more, then the content of the paragraph will go down & will continue further as normal flow.
   </p>	
 </div>
 <br>
 <div class="main-rf2">
 <h5>
   <img class="right-float-img" src="img/newborn-1328454_640.jpg">
   <u>Image floats to the right</u></h5>
   <p>The image property uses  float:right to move  to the right of this paragraph & the content of the paragraph wraps around this image.
   </p>	
 </div>
 </body>
</html>