Internet, Networking, & Security Web Development Understanding the CSS Clear Property Share Pin Email Print Degui Adil/EyeEm/Getty Images Web Development CSS & HTML Web Design SQL By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated February 20, 2020 The has been part of since CSS1. It lets you specify what elements can float beside the cleared element and on which side(s). The property has five possible values: noneleftrightbothinherit How to Use the CSS Clear Property The most common way to use the property is after you've used a property on an element. For example: Text next to my image.Text that is below my image. All elements default to , so if you don't want other elements to float beside something, you must change the style. When you are clearing floats, you match your clear to your float. So if you floated the element to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element and everything after it will appear below it on the web page. If you have elements that are floated to both the right and left, you can clear just one side or you can clear . Using Clear in Layouts The most common way most designers use the property is . You might have an image floating inside a block of text and want the next paragraph to start below the image, or you might have an entire column of text that you want to float beside another bunch of text, with some text appearing below. Here is the HTML for a layout in this form. It has one div container holding another that is floated to the left. This will work fine, with the shorter div floating to the left of the rest of the contents of the main div. You can clear the text next to the floated box by simply adding a tag where you want it to start writing under the floated box. But the problem comes when the floated box is longer than the contents next to it. Then, as you can see, the background color of the main box is not carried down to the bottom of the floated box. Luckily, there is an easy way to fix this: the property. By setting the main box to the background color will remain beside the longer floated box to the very bottom.