CSS clear property
The clear property is directly related to floats. Property Values:
- none - Default. Allows floating elements on both sides
- left - No floating elements allowed on the left side
- right - No floating elements allowed on the right side
- both - No floating elements allowed on either the left or the right side
- initial - Sets this property to its default value. Read about initial
- inherit - Inherits this property from its parent element. Read about inherit
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem
ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
</body>
</html>
Clearfix
Not to be confused with the clear property, clearfix is a concept (that is also related to floats, thus the possible confusion). To contain floats, you've to add .cf or .clearfix class on the container (the parent) and style this class with a few rules described below.
3 versions with slightly different effects (sources :A new micro clearfix hack by N. Gallagher and clearfix reloaded by T. J. Koblentz):
Clearfix (with top margin collapsing of contained floats still occurring)
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}