Template:Clear
This template makes content move down the page beneath earlier elements in one or more columns. It is often used to prevent text from flowing next to unrelated images. This is accomplished by inserting a dimensionless <div> tag (a block element) into the page's HTML code with the CSS3 clear: side; declaration, causing it to drop beneath preceding content to the next available line where it can align with the margin on one or both sides of the page.
Usage
{{Clear}}— adds<div style="clear: both;"></div>to the page (default){{Clear|left}}— adds<div style="clear: left;"></div>{{Clear|right}}— adds<div style="clear: right;"></div>
Parameters
This template accepts three parameters, all of which are optional.
| Parameter | Definition |
|---|---|
side=1=
|
This parameter determines the column(s) that must become empty before the following content is displayed. The only valid values are:
As with all parameters named |
class=
|
Used to assign CSS3 classes to the <div> tag
|
style=
|
Used to assign CSS3 declarations to the <div> tag
|
Examples
Without {{Clear}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Without the {{Clear}} template, this paragraph starts midway down the image.
Using {{Clear}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Here the {{Clear}} template is placed before this paragraph, so it has moved down the page to appear after the image.
Using {{Clear}} with the |side= parameter
Lorem ipsum dolor sit amet, consectetur adipiscing elit,…
Here the {{Clear|right}} template seeks to align with the unoccupied right margin, so this paragraph once again appears alongside the image. However, if used again now that the right margin is occupied…
This time the template was defined to clear a margin that is occupied, so this paragraph moved down to the next line where it could contact that side of the page margin.
