Set sides of an element where other floating elements are not allowed.
Syntax clear: right | left | both | none | inherit ;
right - Force a float:right item to appear below (instead of alongside) any previous float:right items.
left - Force a float:left item to appear below (instead of alongside) any previous float:left items.
both - Force a float:left or a float:right item to appear below (instead of alongside) any previous float:left or float:right items.
none - Remove any clears
inherit - Inherit from a parent element.
If the browser width is too narrow to display both items, they will stack vertically.
Examples:
h1 { clear: both; }
.emw3class { clear: right; }
#emw3id { clear: left; }
It can be useful to embed clear in a stylesheet rule of its own:
.clearfix::after {clear: both}
Try it:
This div is floated left,
it is several lines long, leaving some vertical space This div is floated Right
Another DIV
|
Browser Support: CSS 1 supported in all major browsers.
“Float like a butterfly, sting like a bee” ~ Muhammad Ali
Related:
float - Shift to the left (or right) on the current line allowing other content to flow/wrap alongside.