Clear – Template
Jump to navigation
Jump to search
Lou Montana (talk | contribs) (Fix category and add description) |
Lou Montana (talk | contribs) (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. | ||
== | Code: | ||
{{< | <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> | |||
== | |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=" | <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> | |||
|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 00: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.
Code | Result |
---|---|
LEFT
RIGHT
Cleared
LEFT
RIGHT
Cleared
| |
LEFT
RIGHT
Cleared
| |
LEFT
RIGHT
Cleared
| |
LEFT
RIGHT
Cleared
| |
LEFT
RIGHT
Cleared
|