totn CSS

CSS: clear property

This CSS tutorial explains how to use the CSS property called clear with syntax and examples.

Description

The CSS clear property defines whether a block-level element should be moved down on the HTML page to clear a floated element.

Syntax

The syntax for the clear CSS property is:

clear: value;

Parameters or Arguments

value

The floated element location to clear. It can be one of the following:

Value Description
left Element is moved down to clear left floated elements
div { clear: left; }
right Element is moved down to clear right floated elements
div { clear: right; }
both Element is moved down to clear both right floated elements and left floated elements
div { clear: both; }
none Element will not be moved down to clear any floated elements
div { clear: none; }
inherit Element will inherit the clear from its parent element
div { clear: inherit; }

Note

  • Use the CSS clear property to specify whether a block-level element should be next to a floating element or whether it should move down on the HTML page to clear the floated element.
  • See the CSS float property to learn how to float elements.

Browser Compatibility

The CSS clear property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the clear property below, exploring examples of how to use this property in CSS.

Using Left

Let's look at a CSS clear example where we want to clear a left floated element.

div { clear: left; }

In this CSS clear example, we have set the <div> tag to clear any left floated elements that preceded it in the HTML document.

Using Right

Let's look at a CSS clear example where we want to clear a right floated element.

div { clear: right; }

In this CSS clear example, we have set the <div> tag to clear any right floated elements that preceded it in the HTML document.

Using Both

Let's look at a CSS clear example where we want to clear all left floated elements and right floated elements.

div { clear: both; }

In this CSS clear example, we have set the <div> tag to clear both left floated elements and right floated elements that preceded it in the HTML document.

Share on: