Clear – Template

From Bohemia Interactive Community
Jump to navigation Jump to search
(Fix category and add description)
(Add side option + examples using doc template)
 
Line 1: Line 1:
<includeonly><div style="clear:both"></div></includeonly><noinclude>
<includeonly><div style="clear:{{#switch:{{{1|}}}|left=left|right=right|#default=both}}"></div></includeonly><noinclude>{{Doc/Template
Adds an invisible HTML object to clear CSS float style.
|descr= Adds an invisible HTML object to clear CSS float style.


== Usage ==
Code:
{{<nowiki/>Clear}}
<syntaxhighlight lang="html">
<div style="clear:{{#switch:{{{1|}}}|left=left|right=|right|=both}}"></div>
</syntaxhighlight>
 
|param1= alignment
|descr1= (Optional, default {{hl|both}}) float clearing; can be {{hl|left}}, {{hl|right}} or {{hl|both}}.
|example1= <syntaxhighlight lang="html+handlebars">
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
 
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
<syntaxhighlight lang="html+handlebars">
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear}}
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
|result1=
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
 
<div style="background-color: #FD5">Cleared</div>
<br>
<div style="min-width: 15em"><!-- only for presentation --></div>
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear}}
<div style="background-color: #FD5">Cleared</div>
 
|example2= <syntaxhighlight lang="html+handlebars">
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|ohhimark}}
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
|result2=
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|ohhimark}}
<div style="background-color: #FD5">Cleared</div>


== Output ==
|example3= <syntaxhighlight lang="html+handlebars">
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|both}}
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
|result3=
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|both}}
<div style="background-color: #FD5">Cleared</div>


<syntaxhighlight lang="html">
|example4= <syntaxhighlight lang="html+handlebars">
<div style="clear:both"></div>
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|left}}
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
</syntaxhighlight>
|result4=
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|left}}
<div style="background-color: #FD5">Cleared</div>


[[Category:Templates|{{PAGENAME}}]]</noinclude>
|example5= <syntaxhighlight lang="html+handlebars">
<div style="float: left; background-color: #5F5; height: 3em">LEFT</div>
<div style="float: right; background-color: #F55">RIGHT</div>
{{Clear|right}}
<div style="background-color: #FD5">Cleared</div>
</syntaxhighlight>
|result5=
<div style="float: left; background-color: #5F5; height: 3em">LEFT</div>
<div style="float: right; background-color: #F55">RIGHT</div>
{{Clear|right}}
<div style="background-color: #FD5">Cleared</div>
}}</noinclude>

Latest revision as of 01:57, 4 March 2024

Adds an invisible HTML object to clear CSS float style.

Code:

<div style="clear:{{#switch:{{{1|}}}|left=left|right=|right|=both}}"></div>

This template is used on these pages.

Usage

{{Clear|alignment}}

  • alignment: (Optional, default both) float clearing; can be left, right or both.
Examples
Code Result
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>

<div style="background-color: #FD5">Cleared</div>
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear}}
<div style="background-color: #FD5">Cleared</div>
LEFT
RIGHT
Cleared


LEFT
RIGHT
Cleared
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|ohhimark}}
<div style="background-color: #FD5">Cleared</div>
LEFT
RIGHT
Cleared
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|both}}
<div style="background-color: #FD5">Cleared</div>
LEFT
RIGHT
Cleared
<div style="float: left; background-color: #5F5">LEFT</div>
<div style="float: right; background-color: #F55; height: 3em">RIGHT</div>
{{Clear|left}}
<div style="background-color: #FD5">Cleared</div>
LEFT
RIGHT
Cleared
<div style="float: left; background-color: #5F5; height: 3em">LEFT</div>
<div style="float: right; background-color: #F55">RIGHT</div>
{{Clear|right}}
<div style="background-color: #FD5">Cleared</div>
LEFT
RIGHT
Cleared