php - Where to use clear fix in html inside of a thumbnail dynamic gallery -

i have dynamic gallery, looping. gallery thumbs messed up. used clearfix , worked,but press ctrl z , didnt work ctrl y. lost mistake clear fix. row not going side mean... thumbs not starting left right. starts in left , ending on buttom of page in row down. here pic of it.

here code:

  <div class="container">     <?php     $sql = "select * gallery order id desc limit $start_from, $per_page";     $run = mysqli_query($conn,$sql);     while ($rows = mysqli_fetch_assoc($run))  {     echo'     <div class="row">   <div class="col-md-3 col-sm-2  ">  <div class="thumbnail  " id="real-estates-columns">  <div class="text-center">'.($rows['image'] == '' ? 'no image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div>  <span class="label label-danger info pull-right"> <span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span> <span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span> </span>   <div class="title-realestates-columns caption"> <h3><a><strong>'.$rows['title'].'</strong></a></h3>     <!--p>'.substr($rows['description'],0,30).'...</p--->   <div class="row">  <button type="button"  class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span>  info</button> </div>  </div> </div> </br> </div>   </div>            ';    }   ?>  </div> 

if take out div class="row" out of loop , closing div of class row too,the gallery works this...

how can fix this? thing clearfix were.

you need add clearfix after each 4th col

<?php  if ($i%4 == 0){ ?>     <div class="clearfix"></div> <?php } ?> 

full code:

<div class="container"> <?php $sql = "select * gallery order id desc limit $start_from, $per_page"; $run = mysqli_query($conn,$sql); $i = 1; while ($rows = mysqli_fetch_assoc($run)) {     echo'     <div class="row">         <div class="col-md-3 col-sm-2  ">              <div class="thumbnail  " id="real-estates-columns">                 <div class="text-center">'.($rows['image'] == '' ? 'no image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div>                  <span class="label label-danger info pull-right">                     <span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span>                     <span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span>                 </span>                  <div class="title-realestates-columns caption">                     <h3><a><strong>'.$rows['title'].'</strong></a></h3>                     <!--p>'.substr($rows['description'],0,30).'...</p--->                      <div class="row">                          <button type="button"  class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span>  info</button>                     </div>                 </div>             </div>             </br>         </div>';           if ($i%4 == 0){ ?>             <div class="clearfix"></div>         <?php }         echo'     </div>            ';     $i++; }?> </div>