A Wiki in the Desert
Log in

Difference between revisions of "Template:Clear/doc"

From A Wiki in the Desert
(Created page with "'''{{tl|Clear}}''' adds an empty HTML tag with the {{xt|style {{=}} "clear: both"}} attribute. This forces any following content to start beneath this tag, preventing any cont...")
 
 
Line 7: Line 7:
  
 
== Example ==
 
== Example ==
<pre>[[File:Architecture Test Icons Principles of Architecture.png|200px|left]]
+
<pre>[[File:Basic Chemistry.png|200px|left]]
  
Principles of Architecture
+
Basic Chemistry
  
 
There's no {{tl|clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.{{clear}}
 
There's no {{tl|clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.{{clear}}
Note that this text comes after a {{tl|clear}} template, so it is not wrapped around the icon for Principles of Architecture.
+
Note that this text comes after a {{tl|clear}} template, so it is not wrapped around the image for Basic Chemistry.
  
[[File:Human Body Test Principles.png|200px|left]]Principles of The Human Body{{clear}}
+
[[File:Agriculture.png|200px|left]]Agriculture{{clear}}
This text comes after a {{tl|clear}} template placed after the File link for the icon for Principles of The Human Body and the last line of text. It will be placed past the bottom of the last line of text and the Principles icon.</pre>
+
This text comes after a {{tl|clear}} template placed after the File link for the image for Agriculture and the last line of text. It will be placed past the bottom of the last line of text and the Agriculture image.</pre>
  
 
renders as:
 
renders as:
  
[[File:Architecture Test Icons Principles of Architecture.png|200px|left]]
+
[[File:Basic Chemistry.png|200px|left]]
  
 
Principles of Architecture
 
Principles of Architecture
  
 
There's no {{tl|clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.{{clear}}
 
There's no {{tl|clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.{{clear}}
Note that this text comes after a {{tl|clear}} template, so it is not wrapped around the icon for Principles of Architecture.
+
Note that this text comes after a {{tl|clear}} template, so it is not wrapped around the image for Basic Chemistry.
  
[[File:Human Body Test Principles.png|200px|left]]Principles of The Human Body{{clear}}
+
[[File:Agriculture.png|200px|left]]Agriculture{{clear}}
This text comes after a {{tl|clear}} template placed after the File link for the icon for Principles of The Human Body and the last line of text. It will be placed past the bottom of the last line of text and the Principles icon.
+
This text comes after a {{tl|clear}} template placed after the File link for the image for Agriculture and the last line of text. It will be placed past the bottom of the last line of text and the Agriculture image.
  
 
<noinclude>[[Category:Template documentation|{{PAGENAME}}]]</noinclude>
 
<noinclude>[[Category:Template documentation|{{PAGENAME}}]]</noinclude>

Latest revision as of 22:46, 12 July 2018

{{Clear}} adds an empty HTML tag with the style = "clear: both" attribute. This forces any following content to start beneath this tag, preventing any content above it from wrapping other content around it.

It is commonly used to prevent text wraps between sections on articles with images, and should be used sparingly and with consideration for its effects on both mobile and desktop themes.

Template

{{clear}}

Example

[[File:Basic Chemistry.png|200px|left]]

Basic Chemistry

There's no {{tl|clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.{{clear}}
Note that this text comes after a {{tl|clear}} template, so it is not wrapped around the image for Basic Chemistry.

[[File:Agriculture.png|200px|left]]Agriculture{{clear}}
This text comes after a {{tl|clear}} template placed after the File link for the image for Agriculture and the last line of text. It will be placed past the bottom of the last line of text and the Agriculture image.

renders as:

Basic Chemistry.png

Principles of Architecture

There's no {{clear}} template before this second line, so it wraps around the image. This is the default wrap behavior for images.

Note that this text comes after a {{clear}} template, so it is not wrapped around the image for Basic Chemistry.

Agriculture.png

Agriculture

This text comes after a {{clear}} template placed after the File link for the image for Agriculture and the last line of text. It will be placed past the bottom of the last line of text and the Agriculture image.