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

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents