CSS: how to clear a float – SEO

I’d like to add some text to the bottom of the 6 images on this page.

There is HTML:

<div class="entry-content">
  <div class="onesixth">
    <figure id="attachment_165" aria-labelledby="figcaption_attachment_165" class="wp-caption alignnone" style="width: 164px"><a href="/services/bookkeeping-services"><img class="wp-image-165 size-medium" title="Bookkeeping Services Perth" src="/wp-content/uploads/2016/05/Bookkeeping-380-164x300.jpg" alt="Bookkeeping Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_165" class="wp-caption-text">Bookkeeping Services Perth.</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_166" aria-labelledby="figcaption_attachment_166" class="wp-caption alignnone" style="width: 164px"><a href="/services/administration-support"><img class="wp-image-166 size-medium" src="/wp-content/uploads/2016/05/Bookkeeping-Support-380-164x300.jpg" alt="Bookkeeping Training &amp; Support" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_166" class="wp-caption-text">Bookkeeping Training &amp; Support</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_167" aria-labelledby="figcaption_attachment_167" class="wp-caption alignnone" style="width: 164px"><img class="wp-image-167 size-medium" src="/wp-content/uploads/2016/05/Administration-380-164x300.jpg" alt="Administration Support Services Perth" width="164" height="300">
      <figcaption id="figcaption_attachment_167" class="wp-caption-text">Administration Support Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_168" aria-labelledby="figcaption_attachment_168" class="wp-caption alignnone" style="width: 164px"><a href="/services/hr-support"><img class="wp-image-168 size-medium" src="/wp-content/uploads/2016/05/HR-Support-380-1-164x300.jpg" alt="Human Resources Support and Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_168" class="wp-caption-text">Human Resources Support and Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_169" aria-labelledby="figcaption_attachment_169" class="wp-caption alignnone" style="width: 164px"><a href="/services/website-enhancement-and-search-engine-optimisation"><img class="wp-image-169 size-medium" src="/wp-content/uploads/2016/05/website-seo&amp;enhancement-380-164x300.jpg" alt="website seo &amp; enhancement" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_169" class="wp-caption-text">Website SEO &amp; Enhancement</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_170" aria-labelledby="figcaption_attachment_170" class="wp-caption alignnone" style="width: 164px"><a href="/services/occupational-health-safety"><img class="wp-image-170 size-medium" src="/wp-content/uploads/2016/05/Occupational-Health-and-Safety-380-164x300.jpg" alt="Occupational Health and Safety Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_170" class="wp-caption-text">Occupational Health and Safety Services Perth</figcaption>
    </figure>
  </div>
  <div class="clear"></div>
  <div class="onesixth">
    <p class="clear"><small>BAS Agent<br>
      Xero Partner<br>
      Member of the Institute of Bookkeepers</small></p>
  </div>
</div>

The text that is not clearing the images is:

<small>BAS Agent<br>
   Xero Partner<br>
   Member of the Institute of Bookkeepers</small>

The CSS is:

.onesixth {width: 15%; float: left; margin-right: 1%; display: inline-block;}

.wp-caption.alignnone {
    margin: 1.25em 20px 20px 0;
}
.wp-caption{
   position: relative;
}
.wp-caption img,
.wp-caption-text{
   position: absolute;
}
.wp-caption img{
   top: 60px;
   left: 0px;
}
.wp-caption-text {
   top:0;
   min-height: 56px;
}
figure, figcaption, img {
    margin: 0;
}
.clear {clear: both;}

How do I make sure <div class="clear"></div> just above this works properly?

Or, how do I ensure the <small> displays underneath the 1st image?

Thanks.