Clear

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.


Copyright © 2013-2022 Emw3.com
Some rights reserved