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!