clear: left pushes an element down past any preceding left-floated elements, clear: right does the same for right-floated elements, and clear: both handles floats on either side, ensuring the cleared element starts on a fresh line below all preceding floats rather than wrapping next to them. It's commonly applied either to an element that should visually start below a floated image rather than wrapping beside it, like a footer that shouldn't overlap a floated sidebar, or as part of the classic clearfix technique, applying clear to a pseudo-element specifically to fix a parent container's height-collapsing issue when all its children are floated.
1Understanding Clear
clear: left pushes an element down past any preceding left-floated elements, clear: right does the same for right-floated elements, and clear: both handles floats on either side, ensuring the cleared element starts on a fresh line below all preceding floats rather than wrapping next to them. It's commonly applied either to an element that should visually start below a floated image rather than wrapping beside it, like a footer that shouldn't overlap a floated sidebar, or as part of the classic clearfix technique, applying clear to a pseudo-element specifically to fix a parent container's height-collapsing issue when all its children are floated.
Use clear: both, rather than just clear: left or clear: right individually, unless you specifically know only one particular side has floated elements that need clearing — both is the safer, more universally applicable default.
.sidebar {
float: left;
width: 200px;
}
.footer {
clear: both;
}2Practical Example
Here is a real-world application of Clear showing how it is used in production CSS code.
.clearfix::after {
content: "";
display: block;
clear: both;
}3Best Practices
Follow these guidelines when working with Clear:
1. Apply clear to an element that should start below preceding floated content rather than wrapping beside it, like a footer following a floated sidebar
2. Use clear: both as the safer general default, unless you specifically know only floats on one particular side need to be cleared
3. Apply clear via a ::after pseudo-element on a parent, the classic clearfix technique, specifically to fix that parent's height collapsing due to floated children, rather than adding an extra empty element purely for clearing
Tip: Use clear: both, rather than just clear: left or clear: right individually, unless you specifically know only one particular side has floated elements that need clearing — both is the safer, more universally applicable default.
.sidebar {
float: left;
width: 200px;
}
.footer {
clear: both;
}