CSS clear Property
Description
The clear
property defines the sides of the element that should not float. It turns off the floating to that specific side.
- Initial value
- auto
- Applies to
- Block-level elements
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.clear
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
<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>
.pull-left {
float: left;
padding-right: 10px;
}
.clearfix {
clear: both;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 26th October 2019