CSS propertyLayout and positioning
clear
Forces an element to move below earlier floated elements.
- Initial value
none- Inherited
- No
- Animatable
- no
- Applies to
- block-level elements
- JavaScript
element.style.clear = "both"
Example
#CSS
.article footer {
clear: both;
}Example HTML
<div class="article" style="display: flow-root;">
<div class="box" style="float: left; width: 80px; height: 80px; margin-right: 12px;">Photo</div>
<p style="margin-top: 0">A short paragraph next to the photo.</p>
<footer style="clear: both; padding-top: 8px; color: #a3a3a3;">The footer starts below the photo.</footer>
</div>Preview
Definition and usage
#The clear property tells a block-level element not to sit next to floated elements, but to move below them instead. You can choose whether it applies to elements floated on the left, on the right, or on both sides.
A typical use is an article’s footer, or the next section, which shouldn’t wrap around an image from the previous paragraph.
Modern layouts rarely need it, since Flexbox and Grid don’t use floats. It still comes in handy with content that has text-wrapped images, though.
Syntax
#Syntax
clear: none | left | right | both | inline-start | inline-end;Values
#Values in practice
#none
The paragraph sits next to both floated elements.
.demo { clear: none; }left
The paragraph moves below the left-floated element, but can still sit next to the right one.
.demo { clear: left; }right
The paragraph moves below the right-floated element.
.demo { clear: right; }both
The paragraph moves below every earlier floated element.
.demo { clear: both; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Instead of an extra element with
clear: bothon the parent, usedisplay: flow-root. clearonly works on block-level elements, it has no effect on<span>.
Related entries
#Spotted a mistake or missing an example? Write to us.