Add clear div after every four post in post loop shortcode - wordpress

Question

I've created a shortcode that displays my Staff post. Each post is floating left and there should be four post on each row. Everything is working fine but I need to add a clear div after every four post since the height may vary depending on the content in each post. How do I add the clear div after every four post in my shortcode? My code is below:
/*staff category start*/
add_shortcode( 'staff_category', 'staff_category' );
function staff_category( $atts ) {
ob_start();
// define attributes and their defaults
extract( shortcode_atts( array (
'type' => 'staff',
'order' => 'ASC',
'orderby' => 'menu_order',
'posts' => -1,
'staff_category' => '',
'category' => '',
), $atts ) );
// define query parameters based on attributes
$options = array(
'post_type' => $type,
'order' => $order,
'orderby' => $orderby,
'posts_per_page' => $posts,
'stafftype' => $staff_category,
'category_name' => $category,
);
$query = new WP_Query( $options );
// run the loop based on the query
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<article class="fourth-col-center staff-profile">
<?php
if(has_post_thumbnail()) { ?>
<div class="staff-img">
<?php the_post_thumbnail( 'staff-thumb' ); ?>
</div>
<?php } else { ?>
<div class="staff-img">
<?php echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/nophoto.jpg" />'; ?>
</div>
<?php } ?>
<h3><?php the_title(); ?></h3>
<div class="loop-post-meta">
<ul>
<li>
<?php
global $post;
$stafftitle_value = get_post_meta($post->ID, "wpstaff_textfield", true);
if($stafftitle_value){ ?>
<?php echo $stafftitle_value ?>
<?php } ?>
</li>
</ul>
</div>
</article>
<?php endwhile;
wp_reset_postdata(); ?>
<div class="cleared"></div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}
/*staff category end*/

Answer 1

You could use CSS, something like this should work:
article.staff-profile:nth-child(4n+5) {
clear: both;
}