RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/clear below:

clear · WebPlatform Docs

clear Summary

The clear CSS property specifies if an element can be positioned next to or must be positioned below the floating elements that precede it in the markup.

Overview table

Initial value: none
Applies to: Block-level elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: clear
Percentages: N/A

Syntax

clear: both
clear: inherit
clear: left
clear: none
clear: right

Values

none: May have adjacent floats on both the left and right sides.
left: Floated elements that precede the cleared element are not allowed to the left of the cleared element. The cleared element must move below the floated element.
right: Floated elements that precede the cleared element are not allowed to the right of the cleared element. The cleared element must move below the floated element.
both: Floated elements that precede the cleared element are not allowed to be adjacent to the cleared element. The cleared element must move below the floated elements.
inherit: Takes the same specified value as the property for the element’s parent.

Examples

Example of clear:none; in use.

p{
   
   clear: none;
}

View live example

Example of clear: left; in use.

p{
   
   clear: left;
}

View live example

Example of clear: right; in use.

p{
   
   clear: right;
}

View live example

Example of clear: both; in use.

p{
   
   clear: both;
}

View live example

Moving a footer below all floated content above.

<h1>Clearing Floats</h1>

<div id="box"><code>float:left</code></div>
<p>Paragraphs are typically <code>clear: none;</code> by default, and are frequently used in conjuction with a floated image. In this example,
pretend the black box labeled <code>float:left;</code> is an image floated left. </p>
<p><a href="javascript:void()" id="toggleClear">Toggle the clear settings on the footer</a></p>
<footer id="footer">This is a footer.</footer>

View live example

Notes

The clear property applies to both floating and non-floating elements.
When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Related specifications

CSS Level 2 (Revision 1): Recommendation
CSS - Basic Box Model: Working Draft