Explanation of the CSS clear float property [Examples]
Tags: css, clearfloat
Published: 2018-03-28 12:12:46

---
title: Explanation of the CSS clear float property [Examples]
published: true
description: This article provides a brief but thorough explanation of the CSS float property. Examples are included.
tags: CSS, clear float.
---

A little while ago I wrote about the [float](http://kolosek.com/css-float/
) property. So, now is a good time to explain the **clear** property.  

The clear property is directly related to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to **both floated and non-floated** elements.

If an element can fit in the horizontal space next to the floated elements, **it will**. Unless you apply the clear property to that element in **the same direction as the float**. Then the element will **move below** the floated elements.

Every element created in CSS needs to have the [quality design](https://kolosek.com/10-ways-to-improve-your-website-design/) added.

The clear property can have following values: 

* **None** - the element is **not moved down** to clear past floats.
* **Left** - the element is moved down to clear past **left** floats.
* **Right** - the element is moved down to clear past **right** floats.
* **Both** - the element is moved down to clear past **both left and right** floats.

##Support

After consulting the [Can I Use](https://caniuse.com/#search=clear) service, I saw that the support is **over 87%**. 

![clear_usage](https://kolosek.com/content/images/2018/02/clear_usage.png)


##Examples

HTML
 
```
<div class=”container”>
  <div class=”left-segment”></div>
  <div class=”left-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>
```

CSS 

```
.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #C98EED;
  height: 200px;
  width: 200px;
  margin-right: 10px;
}

.text-clear {
  clear: left;
}
```

![clear_example_1](https://kolosek.com/content/images/2018/02/clear_example_1.png)

Here you can see divs that have **float: left** applied to them. After I have set **clear: left** to the text paragraph, it **moved below** the floated elements.

HTML
 
```
<div class=”container”>
  <div class=”right-segment”></div>
  <div class=”right-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>
```

CSS 

```
.container {
  border: solid thin #ccc;
}

.right-segment {
  float: right;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
  margin-left: 10px;
}

.text-clear {
  clear: right;
}
```

![clear_example_2](https://kolosek.com/content/images/2018/02/clear_example_2.png)

Next, you can see two divs with the **float: right** property and a paragraph with the **clear: right** property. By setting this, the paragraph gets moved **below the floated elements**.

Now is the good time to add [some formatting](https://kolosek.com/css-line-height/) to the text.


HTML 

```
<div class=”container”>
  <div class=”left-segment”></div>
  <div class=”right-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>
```

CSS

```
.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
}

.right-segment {
  float: right;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
}

.text-clear {
  clear: both;
}
```

![clear_example_3](https://kolosek.com/content/images/2018/02/clear_example_3.png)

Finally, the last example shows the usage of the **clear: both** property. The two divs are floated **left and right**, while the paragraph has the clear property added to it. With this, it gets **moved below** both of the [floated elements](http://kolosek.com/css-float/). It's good to mention that this is the most commonly used clear property. 

##Summary

Hope this article will help you in your projects. Be careful when using this property, it is known to have caused a lot of confusion in the past. But, I am sure that after reading this article, you are good to go!

Happy coding!

This post is originally published on [Kolosek Blog](https://kolosek.com/css-clear-float/).