CSS Floats clear property


Example

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>
<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 </p>

</body>
</html>