CSS clear: Ways to Use Clear With Both and Left Values Example

The Clear property

The CSS clear property is used to specify floating of the other element. By default, you can float an element in either direction, left or right of the other element.

An example of clear property

However, by using the clear CSS property, you can specify which direction to allow and to not allow other element’s floating.

The clear property has the following values:

  1. Clear: none (This is the default value where other elements are allowed to float in any direction).
  2. Clear: left (The other element is not allowed to float left).
  3. Clear: right (The other element is not allowed to float right).
  4. Clear: both (The other element is not allowed to float left or right)

Clear property with both and left values example

The following example shows how to use the CSS clear property. The example below shows four paragraphs.

The first two paragraphs use clear: both value while images are set with the float property to the left and right, respectively.

The last two paragraphs use the default value in the clear property. You can see the difference by seeing the example online.

CSS-clear property

Experience this example online


Further Reading: CSS float