# 
#     

The **`clear` property** in #key# CSS: Cascade Style Sheets #key# controls the flow when using the float property. It specifies what will happen to the elements next to the floating elements. 

##
## Syntax

---
```css
clear: none|left|right|both|initial|inherit;
```
---

# Property values

- **`none`**: This is the default value. 

- **`left`**: It is used to push the elements below the left floated elements.

- **`right`**: It pushes the elements below the right floated elements.

- **`both`**: It to pushes the elements below the right and left floated elements.

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This is used to inherit property from its parent value.

# 
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `clear` property.

<title>Example</title>

<div class="left">Left</div>          
<div class="right">Right</div>
<div class="clear">Clear</div>

//This property is used to define the properties of a box
div {
  background: rgb(2, 87, 99);
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}

.right {
  float: right;
}

.left {
  float: left;
}

.clear {
  clear: both;
  background: rgb(106, 155, 96);
}

codemirror

What is the CSS clear property?