Clear Floats in WordPress

Editing WordPress pages, I often float images left or right so that text flows nicely around them. Sometimes, though, I—or my less tech-savvy clients—want the next paragraph to start below the floated image, also if that image happens to be ‘too tall.’ (Note: I was hoping Gutenberg would somehow turn this into a non-issue, but alas.)

A CSS-only solution is possible, but will clear every paragraph within a post:

.entry-content p:after {
  content: "";
  display: table;
  clear: both;
}

If that’s not an option, rather than resort to convoluted CSS or JavaScript, I quickly cook up a ‘clear floats’ shortcode, like so:

add_shortcode( 'clear', function() {
  return '<div style="clear: both;"></div>';
} );

Add the code above to your child theme’s functions.php, and force clear any paragraph following a floated element by adding [clear] in front of it. Not exactly pretty, but works a treat!