HTML clear Attribute

HTML clear Attribute

The obsolete HTML clear attribute was historically used with the <br> element to control where content continued in relation to floated elements.

Historical Syntax

The clear attribute was commonly added to a <br> element and assigned a value indicating which side of a floated element should be cleared:

<br clear="left">

Historical values included left, right, all, and none. The attribute affected where content following the line break could continue in relation to floated content.

Historical Elements

The clear attribute was historically associated with the <br> element.

Historical Use

The clear attribute was useful when images and other content were positioned to the left or right and surrounding text flowed beside them. Authors could insert a <br> element with clear to force subsequent content below the floated content.

For example, clear="left" prevented following content from continuing beside a left-floated element, while clear="right" cleared a right-floated element. The all value was used to clear floated content on both sides.

Why It Became Obsolete

The clear attribute controlled page presentation directly from HTML. CSS provides the clear property for the same general purpose while keeping presentation separate from document structure.

Modern layout systems such as Flexbox and Grid also reduce the need to use floats for page layout. Floats remain useful for cases such as allowing text to wrap around an image, but they are no longer the primary method for arranging page sections and columns.

Modern Alternative

Use the CSS clear property when an element needs to move below preceding floated content. Common values include left, right, both, and none.

Historical HTML

<img src="image.jpg" alt="Example" align="left">
<p>This text flows beside the image.</p>
<br clear="all">
<p>This content begins below the image.</p>

Modern HTML and CSS

<img src="image.jpg" alt="Example" class="float-left">
<p>This text flows beside the image.</p>
<p class="clear-both">This content begins below the image.</p>

<style>
.float-left {
  float: left;
  margin: 0 15px 10px 0;
}

.clear-both {
  clear: both;
}
</style>

In the modern example, the image uses CSS float and the following paragraph uses clear: both. This removes the need for a presentational <br> element whose only purpose is controlling the layout.

Learn More About CSS Float and Clear

The CSS tutorials provide more information about floats and modern layout techniques:

• CSS Float & Clear - Learn how floated elements affect surrounding content and how the clear property controls what follows them.
• CSS Flexbox - Learn how to arrange elements with a modern one-dimensional layout system.
• CSS Grid - Learn how to create row and column layouts without relying on floats.

Legacy Browser Support

The HTML clear attribute was recognized by older browsers and was commonly used on <br> elements in webpages that relied on floated content.

Browsers may continue to recognize old uses of the attribute for compatibility with existing webpages, but it should not be used in modern HTML. Use the CSS clear property when clearing floated content is necessary.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

Other obsolete HTML attributes historically used to control alignment, spacing, and presentation include:

• align - Historically used to control alignment, including the placement of images beside surrounding content.
• hspace - Historically used to add horizontal space around elements such as images.
• vspace - Historically used to add vertical space around elements such as images.

Specifications

The clear attribute is obsolete in modern HTML. Float clearing and related presentation should be controlled with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.