clear (HTML attribute)-CSS Tutorial-php.cn

clear (HTML attribute)

Jennifer Aniston

Release： 2025-02-27 08:38:09

Original

254 people have browsed it

The clear attribute: a deprecated method for controlling element flow. This HTML attribute, now considered outdated, was used to prevent content from wrapping around floated elements (like images or tables). Instead of using clear, modern web development relies on CSS for layout control.

The clear attribute's functionality is replicated using the CSS clear property. Here's a comparison:

Deprecated HTML:

<br clear="left"></br>

Copy after login

Modern CSS:

<br style="clear: left;"></br>

Copy after login

(Note: inline CSS, as shown above, is generally discouraged. It's best practice to define styles in a separate CSS file or within <style> tags in the <head>.)

Example: Preventing text from wrapping around a right-aligned image.

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174061669131942.jpg"  class="lazy" alt="clear (HTML attribute) " />
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 style="clear: both;"></br>
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>

Copy after login

Frequently Asked Questions (FAQs)

Purpose of the clear attribute: The clear attribute controls element flow, particularly around floated elements. It specifies which sides (left, right, both, or none) floating elements are prevented from wrapping around.
Difference between clear and CSS float: float positions an element to the left or right, allowing other content to flow around it. clear prevents that wrapping behavior.
clear with non-floated elements: clear only affects floated elements. Use other CSS properties (like position, display, or flex) for non-floated elements.
clear: both: This prevents floating elements from appearing on either side of the element.
clear's impact on layout: clear significantly affects layout by controlling element positioning relative to floated elements. It creates cleaner, more organized layouts.
Browser support: clear is widely supported in modern browsers, but testing across browsers is always recommended.
clear with inline elements: While technically possible, it's less effective with inline elements due to their inherent behavior.
Consequences of omitting clear with floated elements: Omitting clear can lead to overlapping or misaligned elements.
clear in responsive design: clear is useful in responsive design to maintain consistent layouts across different screen sizes.
Common issues: Unexpected clearing behavior might occur with nested elements or complex layouts. Remember, clear only works with floated elements, not absolutely positioned or flex elements.

The above is the detailed content of clear (HTML attribute). For more information, please follow other related articles on the PHP Chinese website!