Without Clear
The [clear] shortcode probably isn’t one you’ll have to use a whole lot, but it’s important to know when and where to use it. “Clearing” another element is most important when you begin floating elements on your page, for example, images. Problems can arise when the last item in your content area is floated to the left or the right to achieve the layout you’re looking to accomplish. When this happens, webpages tend to do some silly things, like the example seen above.
With Clear
In this second image, you can see that once we add the [clear] shortcode, everything is back in the right place again! If you find yourself running into layout problems when floating elements throughout your page, try the [clear] shortcode out to see if you can resolve your problems.
You will also notice that although “invisible,” the [clear] shortcode allows you to input an ID, classes, or inline styles. This is because we use a hidden <hr> element to accomplish the clear by setting the border and margin to “0” (instead of nasty empty <div> elements that are a bad markup practice). If for any reason you would actually like to give this element a little style, feel free to do so!