Introduction

The clear CSS property controls how an element is positioned relative to floating elements that come before it. This property can be used on both floating and non-floating elements, making it versatile for managing layouts. When applied to non-floating blocks, clear moves the element down until it is below the margin edge of all relevant floats. For floating elements, clear moves the margin edge of the bottom element below the margin edge of all relevant floats, influencing the position of subsequent floats.

Specification

The clear property is defined in several CSS specifications, ensuring consistency across different browsers and platforms.

Key Specifications

• CSS 2.2 Specification: Details the clear property under propdef-clear.
• CSS Logical Properties and Values Level 1: Includes clear under float-clear, adding logical values like inline-start and inline-end to support different text directions and writing modes.

Description

The clear property in CSS controls the positioning of elements relative to floating elements that appear before them. It determines whether an element should be moved down (cleared) past floating elements, keeping the layout organized and visually appealing. When applied to non-floating blocks, clear moves the element’s border edge down until it is below the margin edge of all relevant floating elements. For floating elements, clear moves the margin edge of the bottom element below the margin edge of all relevant floats, affecting the positioning of subsequent floating elements.

Syntax

The clear property in CSS is straightforward and can be applied with various keyword values to control the positioning of elements relative to floating elements.

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

Explanation

• none: The default value. Allows elements to float on both sides.
• left: Moves the element down to clear past left-floating elements.
• right: Moves the element down to clear past right-floating elements.
• both: Moves the element down to clear past both left and right-floating elements.
• inline-start: Moves the element down to clear floats on the start side of its containing block. For left-to-right scripts, this is equivalent to left, and for right-to-left scripts, it is equivalent to right.
• inline-end: Moves the element down to clear floats on the end side of its containing block. For left-to-right scripts, this is equivalent to right, and for right-to-left scripts, it is equivalent to left.

Global Values

• inherit: The element inherits the clear value from its parent element.
• initial: Sets the property to its initial value, which is none.
• revert: Reverts the property to the value specified by the user-agent stylesheet.
• revert-layer: Reverts the property to the value specified by the user-agent stylesheet for the current cascade layer.
• unset: Resets the property to its natural value, behaving as though the property is not set.

Examples

Clear: Left

HTML:

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

In this example, the paragraph with the class left uses clear: left, which moves it below the left-floating paragraphs (black and red).

Clear: Right

HTML:

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

In this example, the paragraph with the class right uses clear: right, which moves it below the right-floating paragraphs (black and red).

Clear: Both

HTML:

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>

CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

In this example, the paragraph with the class both uses clear: both, which moves it below both the left-floating (black) and right-floating (red) paragraphs, creating a clean break in the layout.

Using the clear Property in CSS

In this example, a paragraph with the class both uses clear: both, which moves it below all floating paragraphs (black and red). This illustrates how the clear property can control the positioning of elements relative to floating elements, ensuring a clean and organized layout.

Browser Compatibility

The clear property is widely supported across all major web browsers, making it a reliable tool for web developers.

Browser Compatibility Table

See Also

To further enhance your understanding and application of CSS properties related to layout and positioning, consider exploring the following resources:

CSS Properties:

• CSS float Property: Learn how to float elements and control their positioning within a container.
• CSS display Property: Understand the different display values and how they affect the layout of elements.
• CSS Box Model: Gain insights into the box model, which defines the rectangular boxes that are generated for elements in the document tree.

Layout Techniques:

• CSS Flexbox: Discover the flexible box layout module, which provides a more efficient way to lay out, align, and distribute space among items in a container.
• CSS Grid Layout: Explore the grid layout system, which allows for the creation of complex layouts with ease.
• CSS Positioning: Learn about the different positioning techniques available in CSS, including static, relative, absolute, and fixed positioning.

Related Tutorials:

• HTML Layout Tutorial: Get a comprehensive understanding of how to structure HTML documents and websites.
• CSS Layout Tutorial: Dive into various CSS layout techniques and best practices.

Advanced Topics:

• CSS Logical Properties and Values: Understand how logical properties and values can be used to create more adaptable and responsive designs.
• CSS Inheritance: Learn about inheritance in CSS and how it affects the styling of elements.

FAQs

What does the clear property do in CSS?

The clear property in CSS controls the behavior of floating elements. It specifies whether an element should be moved below (cleared) floating elements that precede it. This is crucial for managing the layout of web pages, especially when dealing with complex designs that involve floating elements.

What are the possible values for the clear property?

The clear property accepts several values:

• none: The default value, which allows elements to float on both sides.
• left: Moves the element below left-floating elements.
• right: Moves the element below right-floating elements.
• both: Moves the element below both left and right-floating elements.
• inline-start: Moves the element below floats on the start side of its containing block (e.g., left for left-to-right scripts).
• inline-end: Moves the element below floats on the end side of its containing block (e.g., right for left-to-right scripts).

Additionally, there are global values like inherit, initial, revert, revert-layer, and unset.

How is the clear property commonly used in layouts?

The clear property is often used to prevent floating elements from overlapping with content below them. This is particularly useful in multi-column layouts or when dealing with floated navigation bars. By using clear, web developers can maintain a clean and organized layout.

What happens if I use clear: both?

Using clear: both forces the element to be positioned below all floating elements, regardless of whether they are floated to the left or right. This is commonly used to fix layout issues and ensure that elements appear below all floating content.

Can clear be used with inline elements?

The clear property is primarily intended for block-level elements. It may have no visible effect on inline elements unless they are within a block context. Therefore, it is most effective when applied to block-level elements.

What browsers support the clear property?

The clear property is widely supported across all major web browsers, including:

• Google Chrome: Since version 1.0
• Mozilla Firefox: Since version 1.0
• Microsoft Edge: Since version 12.0
• Internet Explorer: Since version 5.0
• Opera: Since version 6.0
• Safari: Since version 1.0

How does the clear property interact with the float property?

The clear property is used to control the position of elements relative to floating elements. When an element is floated using the float property, the clear property can be used to move subsequent elements below the floated elements, ensuring that the layout remains organized and visually appealing.

What happens if an element contains only floated elements?

If an element contains only floated elements, its height collapses to nothing. To ensure that the element can resize to contain floating elements inside it, you can set the value of the element’s display property to flow-root.

Can the clear property be animated?

The clear property does not support smooth transitions or animations. It changes instantly when applied, making it a discrete property.