Template:Clear

{{clear}} clears all existing floats, causing subsequent content to be displayed starting below the lowest extending floated item. This is used to tidy up layout issues arising from unexpected flow of test around thing like floated images. You can consider this equivalent to inserting an invisible horizontal rule.

For example, a page may be intended to contain two images side by side with text appearing underneath the two. One image is "floated" to the left edge using [[Image:Example1.jpg|left]] and the other floated to the right edge with [[Image:Example2.png|right]], and the text is added to the page below both images. If the browser window is not too wide, then the page will render as expected. However if the browser window width is is increased much beyond the horizontal width of the two images, then the text will start to flow between the images. Inserting {{clear}} after the images and before the text will correct this behaviour.

Usage

Insert {{clear}} after any floated items and before any content which must "clear" the floats.