CSS clear Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The clear CSS property is used to control the behavior of an element in relation to nearby floated elements. When an element is set to clear, it specifies whether it should be allowed to float next to any preceding floated elements, or if it should be moved below them, effectively clearing the floated content. This property is particularly useful for maintaining the layout and positioning of elements within a webpage, ensuring that elements do not overlap or interfere with floated elements that appear earlier in the HTML structure. The clear property can take values like left, right, both, or none, which dictate the clearing behavior in different directions, and it is commonly used in conjunction with floated elements to achieve desired layout outcomes.

Initial value: auto
Applies to: Block-level elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.clear

Interactive Demo

clear: none;

clear: left;

clear: right;

clear: both;

Left

Right

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

clear: none | left | right | both

Values

noneThe element is not moved down to clear past floating elements.
leftThe element is moved down to clear past left floats.
rightThe element is moved down to clear past right floats.
bothThe element is moved down to clear past both left and right floats.

Example

HTML

<div class="pull-left">

   <img src="images/2.png" alt="">

</div> 

<div class="clearfix"></div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

CSS

.pull-left { 
   float: left; 
   padding-right: 10px; 
} 
.clearfix {
   clear: both; 
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS clear property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st January 2024

Support Us