語法
清除浮動clear
Moving an element below floating elements instead of floating to the left or right.
Overview
| Class | Declarations |
|---|---|
clear:type | clear: type;
|
clear:both | clear: both;
|
clear:left | clear: left;
|
clear:none | clear: none;
|
clear:right | clear: right;
|
Basic usage
Clearing both left and right floats
Use both:clear to move the element below all floated elements.
Left
Right
Clear
<div> <div class="float:left">Left</div> <div class="float:right">Right</div> <div class="clear:both">Clear</div></div>Clearing left floats
Use both:left to move the element below all left floated elements.
Right
Right
Left
Clear
<div> <div class="float:right">Right</div> <div class="float:right">Right</div> <div class="float:left">Left</div> <div class="clear:left">Clear</div></div>Clearing right floats
Use both:right to move the element below all right floated elements.
Left
Left
Right
Clear
<div> <div class="float:left">Left</div> <div class="float:left">Left</div> <div class="float:right">Right</div> <div class="clear:left">Clear</div></div>Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="clear:both:hover clear:both@sm clear:both@dark clear:both@print">…</div>