clear (HTML attribute)

Share this article

Description

The clear attribute is a deprecated (presentational) attribute that’s used to clear any preexisting right or left alignments. It ensures that the content after the br element appears beneath the baseline of the previously aligned element; the br doesn’t just create a line break in the content that’s flowing around the right- or left-aligned element.

In the past, this approach would most often have been used to stop content wrapping around a right- or left-aligned image or table.

The correct way of managing alignment issues is to use the CSS float property, rather than the HTML align attribute. To clear elements, we use the CSS clear property like so:

<br clear="left"/> the old-fashioned HTML way

<br style="clear:left;"/> the CSS way

Note that you should avoid inline CSS styles—the inline style above is provided for direct comparison purposes only.

Example

This example shows a br with which a clear attribute is used to take content below a right-aligned image:

<p><img src="pool.jpg" alt="sitting by the pool" align="right"/>
    The rest of the day was a lazy one, partly spent by the complex
    pool, partly inside watching British TV, but we couldn't be doing
    this for the rest of the holiday. Already we were missing having
    the car!
  <br clear="all"/>
    I decided to check out what the weather would be doing for the next
    few days, as that would help us make any decisions about future
    excursions.
</p>

Frequently Asked Questions (FAQs) about HTML Clear Attribute

What is the purpose of the clear attribute in HTML?

The clear attribute in HTML is used to control the flow of elements, especially when dealing with floated elements. It specifies on which sides of an element floating elements are not allowed to float. It can take four values: left, right, both, and none. For instance, if you set clear: left; it means no elements can float on the left side of the specified element.

How does the clear attribute differ from the float attribute in CSS?

While both the clear and float attributes are used in controlling the layout of elements, they serve different purposes. The float attribute is used to push an element to the left or right, allowing other elements to wrap around it. On the other hand, the clear attribute is used to prevent elements from wrapping around a floated element.

Can I use the clear attribute with non-floated elements?

The clear attribute is specifically designed to work with floated elements. It won’t have any effect on non-floated elements. If you want to control the layout of non-floated elements, you might need to use other CSS properties like position, display, or flex.

What does clear: both do in CSS?

The value ‘both’ in the clear attribute is used when you want to prevent elements from floating on both sides of a specified element. This means no elements can float on either the left or right side of the specified element.

How does the clear attribute affect the layout of a webpage?

The clear attribute can significantly affect the layout of a webpage by controlling how elements are positioned in relation to each other. It can prevent text or images from wrapping around a floated element, which can be useful in creating clean, organized layouts.

Is the clear attribute supported in all browsers?

Yes, the clear attribute is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s always a good idea to test your code in different browsers to ensure it works as expected.

Can I use the clear attribute with inline elements?

The clear attribute is typically used with block-level elements. While you can apply it to inline elements, it may not have the desired effect as inline elements do not typically have line breaks before or after them.

What happens if I don’t use the clear attribute with floated elements?

If you don’t use the clear attribute with floated elements, other elements may wrap around the floated element. This can sometimes lead to unexpected layout issues, such as overlapping elements or elements being pushed out of their expected position.

Can I use the clear attribute in responsive design?

Yes, the clear attribute can be very useful in responsive design. It can help control the layout of elements at different screen sizes, ensuring your design looks good on all devices.

What are some common issues I might encounter when using the clear attribute?

Some common issues you might encounter when using the clear attribute include elements not clearing as expected, especially when dealing with nested elements or complex layouts. Additionally, the clear attribute only works with floated elements, so it won’t have any effect on absolutely positioned or flex elements.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form