Understanding the CSS Clear Property

Summary: In the css world, there is a property called css clear. Its function is to “clear” an element of css from its parent elements. What does that mean? Basically, it just means you can define what should happen when css items touch each other, and in some cases, you might want them to be pushed away from one another or have no effect at all on one another. Understanding css clear is important if you are trying to create an efficient website layout with a lot of content without scrolling horizontally and vertically for pages on end!

css clear property is used to make css items “clear” one another. It can push css elements away from each other or have no effect on them at all!

How Does CSS clear Property work:

css clear property is used to make css items “clear” one another. It can push css elements away from each other or have no effect on them at all!

Examples of CSS clear Property: As a general rule, clearing css should be done as close to the element needing clearance as possible and in this way avoid the need to repeat css clear properties

Values: 

Clear: Left | RIght | Both | None | Initial | Inherit

Syntax:

– css clear: left

– css clear: right

– css clear: both

– css clear: none

Clears Left, Right, or Both sides of an element; e.g., clear float in a liquid layout. The value none doesn’t do anything to the specified side but is needed for grouping selector types together when the other option would have no effect.

– css clear: initial

The css is reset to its default values when the page loads.

– css clear: inherit

Allows you to set what css should be inherited from an element’s parent or ancestors; e.g., text in a fixed position stays where it is, even if you scroll down through the page.

Example :

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
.wrapper{
    padding:10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  width:20%;
}
p {
  width: 50%;
}

Notice how this css code uses the clear property to create a distinction between paragraphs that are floated left and right, as well as what happens when you scroll down through the page? If we didn’t use css clear on some of these elements, they would overlap when we scroll down the page.

This css property can also be used to keep content from stacking on top of other things by using it in conjunction with margins and padding.

What is clearfix?

NOTE: When a container element contains only floated elements, its height collapses to nothing, and it cannot resize. To fix this problem, you can use the clearfix technique by adding the ‘clear’ property in an after pseudo-element on your container. This will ensure that containers are able to contain floating elements inside them anytime they want!

Try this code for clearfix:

#container::after {
  content: "";
  display: block;
  clear: both;
}

You can use left, right as well as none for clearing element’s sides.

Conclusion:

The CSS Clear Property is one of the most powerful and underutilized properties in web design. It allows you to do things that would otherwise be impossible, such as clearing floats on both sides at once or removing an element from a containing block without having it affect other elements. We’ve covered some great examples for using this property throughout our article; however, there are many more uses than we could possibly cover here. If you want to learn more about how to use the clear property effectively, check out these articles on A List Apart and Smashing Magazine!

Follow us on Facebook for daily updates

Also Read: Before After CSS Pseudo-elements

Browser Support

ChromeEdgeFirefoxInternet ExplorerOperaSafariNode.js
Full support 45Full support 12Full support
1
Full support
4
Full support
4
Full support
4
Full
Support
Desktop Browsers
WebView AndroidChrome AndroidFirefox AndroidOpera AndroidSafari on iOSSamsung Internet
Full
support
45
Full
support
45
Full
support
4
Full
support
10.1
Full support
14
Full
support
5.0
Mobile Browsers

Leave a Comment