Sometimes, we don't want the content to flow around a floated element. Using the clear property will prohibit content from running adjacent to one or more sides of the box. For instance, clear will stop the elements from moving up next to a floated element. In the case below, the third paragraph is moving up into the floated element.
By using the clear property, we can clear out the float from the second paragraph so the third paragraph will return to the left edge of the window. Clear values are left, right, both or none. Think of the clear property as making sure that the left (or right or both) side(s) of an element have cleared the floating element.
It is usually recommended that a class be set to clear:both as it can then be used to clear any float.
takes care of clearing left or right floats
.clearFloats {clear: both;}
All 5 images on this page (excluding the "Tip" sidebar) are floated left. This one works as expected. The image is up against the left margin of the page ... Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis. Aliquam consectetuer sem eu nibh. Proin eleifend ligula eu erat vestibulum hendrerit. Fusce gravida, lacus at fringilla tempor, nisl purus bibendum mauris, quis nonummy turpis libero eu tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed varius, sem faucibus porta aliquam, purus dolor pulvinar velit, vitae venenatis orci pede vitae pede. Vestibulum laoreet urna id lacus.
This image is located on the page as expected because the paragraph above is long...once the text flows around the floated element, it returns to the left edge and then the floated image and text in this paragraph flow as intended.
Whoa! This shouldn't be happening! The Stylin' logo image should be over on the left edge! But it's getting hung up in the float above because the preceding paragraph above is a short paragraph and this paragraph begins before the float area (the bottom of the cloud image) has been cleared. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam.
Click this
EXAMPLE
to see how the clear property is used to correct the issue above.
You can get different effects by putting the image inside the text and floating it. However, depending on the size of the window and the look you are trying to achieve, you may need to use clear. In this case, The paragraph is barely longer than the image, so it would be a good idea to clear the paragraph that follows it just in case a user has an extra wide window.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue.Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.
Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada diam.
This paragraph has the clear:both property in case the paragraph above does not extend beyond the bottom edge of the image. Sed aliquet. Curabitur a est.Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam. Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis. Aliquam consectetuer sem eu nibh. Proin eleifend ligula eu erat vestibulum hendrerit. Fusce gravida, lacus at fringilla tempor, nisl purus bibendum mauris, quis nonummy turpis libero eu tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed varius, sem faucibus porta aliquam, purus dolor pulvinar velit, vitae venenatis orci pede vitae pede. Vestibulum laoreet urna id lacus.