paint-brush
How to Clear Floats using clear-float propertyby@kolosek
111 reads

How to Clear Floats using clear-float property

by Nesha
Nesha HackerNoon profile picture

Nesha

@kolosek

CEO @ Kolosek.com

April 24th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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. Be careful when using this property, it is known to have caused a lot of confusion in the past, but, we are sure that after reading this article, you are good to go! The support for this property is over 87% on Can I Use service, we see that the support is over 90%.

Company Mentioned

Mention Thumbnail
Lyft
featured image - How to Clear Floats using clear-float property
Nesha HackerNoon profile picture
Nesha

Nesha

@kolosek

CEO @ Kolosek.com

About @kolosek
LEARN MORE ABOUT @KOLOSEK'S
EXPERTISE AND PLACE ON THE INTERNET.

A little while ago we wrote about the 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 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 service, we see that the support is over 87%.

image

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;
}
image

Here we can see divs that have float: left applied to them. After we 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;
}
image

Next, we 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 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;
}
image

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. 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, we are sure that after reading this article, you are good to go!

Happy coding!

Previously published at kolosek.com/css-clear-float/

L O A D I N G
. . . comments & more!

About Author

Nesha HackerNoon profile picture
Nesha@kolosek
CEO @ Kolosek.com

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Learnrepo
Coffee-web
Coffee-web
Hashnode
Learnrepo

Mentioned in this story

companies
X REMOVE AD