What is clearfix class in css

How CSS clearfix property useful ?

You are supposed to wrap floated elements with it and as a result, those elements wont be removed from the document flow. Example 1 If you need to display elements next to each other, you can float them both and wrap them in clearfix .

How CSS clearfix property useful ?

In this article, we will see what is clearfix CSS property and how it is useful, along with understanding the different ways of implementing it through the examples.

Assigning a number of CSS properties to a parent element that will wrap its floating children is a common technique in CSS float-based layouts. This technique is usually implemented using a class called clearfix . Hence, it is not a CSS property but a simple hack that allows a container to wrap its floating children.

Clearfix is generally used when floating elements are needed to be stacked horizontally. Without clearfix, the container with floated children will collapse like its children are positioned absolutely like the shown below:

Implementing the clearfix can be done in multiple ways such as by using the overflow property that helps to control the overflow of the content from the element’s box. The display property also helps by specifying the display behavior of an element, i.e, it depends on the type of rendering box the element contains. We will understand all those concepts sequentially.

Using overflow-property : It is the most common implementation of clearfix by assigning overflow-property with a value anything but visible because it will create a new block formatting context(BFC).

Using display-property : We can also implement clearfix by assigning display-property to inline-block or flow-root . This will also create a new BFC.

Example 1: This code example demonstrates the problem when we doesn’t use a clearfix.

Источник

How to Clear Floats? What is Clearfix?

A clearfix is a way for the parent element to clear or fix its elements automatically, so no additional markup is needed. In a float layout, it is generally used where elements are floated to stack horizontally.

It is a CSS hack that solves a bug that occurs when two floated elements are stacked next to each other. All you may be trying to do is to position a sidebar to the left of your main content block, but as a result, there will be two elements that overlap and collapse on each other. The bug is inconsistent across browsers. So, the clearfix was invented to solve such problems.

Here, we will discuss 3 clearfix hacks.

1. Use the CSS overflow property

When an element is bigger than its containing element, and it is floated, it will overflow its container.

We can add the overflow property with the «auto» value to the containing element to fix this issue.

Example of clearing floats with the overflow property:

html> html> head> title>Title of the document title> style> div < border: 2px solid #1c87c9; padding: 8px; > .noclearfix < float: right; > .clearfix < overflow: auto; > p < clear: right; > .img < float: right; > style> head> body> div> img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> p>Add overflow: auto; p> div class="clearfix"> img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> body> html>

2. Use the CSS clear, content, and display properties with ::after

The overflow:auto clearfix works well as long as you can control your margins and paddings (else scrollbars may be seen). However, a newer clearfix hack is safer to use, and most web pages use the following code:

.clearfix::after < content: ""; clear: both; display: table; >

Here, we use the ::after pseudo-element. The clear property is set to «both», which means that the floating elements are not allowed on both right and left sides. The display property is set to «table» to make the element behave like an HTML element. And the content is left empty.

Example of clearing floats with the clear, display, and content properties:

html> html> head> title>Title of the document title> style> div < border: 2px solid #1c87c9; padding: 8px; > .noclearfix < float: right; > .clearfix::after < content: ""; clear: both; display: table; > .img < float: right; > p < clear: right; > style> head> body> div> img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> p>Add the new clearfix hack. p> div class="clearfix"> img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> body> html>

3. Use the CSS display property with «flow-root»

Actually, we are reaching a time when the clearfix is no longer needed. The clearfix is losing a bit of relevance. Grid and Flexbox are filling in the gaps for an advanced layout on the web. There is a new way of replacing the clearfix hack with a single line of code using a new display mode rule, which is known as flow-root.

Use the flow-root in this way:

.clearfix < display: flow-root; >

Example of clearing floats with the «flow-root» value of the display property:

html> html> head> title>Title of the document title> style> div < border: 2px solid #8ebf42; padding: 8px; > .noclearfix < float: right; > .clearfix < display: flow-root; > .img < float: right; > p < clear: right; > style> head> body> div> img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> p>Add display: flow-root. p> div class="clearfix"> img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. div> body> html>

Example of using the clearfix hack and «flow-root» value of the display property:

html> html> head> style> .container < border: 1px solid #3bc9db; border-radius: 5px; background-color: #e3fafc; width: 400px; padding: 5px; > .container2::after < content: ""; display: block; clear: both; > .container3 < display: flow-root; > .item < height: 100px; width: 100px; background-color: #1c87c9; border: 1px solid #eee; border-radius: 5px; float: left; > .clear < clear: both; > .wrapper < max-width: 600px; margin: 40px auto; > style> head> body> div> div class="wrapper"> h2>Default behavior h2> p>This item is a wrapper, which contains a left-floating block. p> div class="container container1"> div class="item"> div> Example one div> p> The border on the containing block wraps only the text as the floated element is taken out of flow. p> p> The content following the box will rise up and wrap around the float unless we set it to clear. p> h2 class="clear">The clearfix hack h2> p> In this item, we use the clearfix hack to cause the wrapper to clear the floated item. p> div class="container container2"> div class="item"> div> Example two div> h2>Using display: flow-root h2> p> CSS now has a way to make elements clear floats. The value of the display is set to flow-root, and our floated box is cleared. p> div class="container container3"> div class="item"> div> Example three div> div> div> body> html>

Источник

Clearfix hack: A CSS Trick you cannot ignore

We apply various hacks in our everyday life to solve complications and make things easier and comfortable in use. Clearfix is a hack for the developers that solves a CSS layout problem tactfully. Clearfix is neither a CSS property nor an attribute. It is actually an idea, a trick to fix a common CSS problem closely associated with clear and float property.

Contextually, beginners who are anyway uncertain of float and clear property are suggested to check-out these links: Understand CSS Float Property own Way and Figure out CSS clear and float Property.

What Clearfix is

Clearfix technique is used to solve the problem created in float-based layout. When a number of elements (children) float under a container element (parent), children tend to stack with each other horizontally or one overlaps other or overflows outside container. This is a common problem arising during building up any layout including website layout that usually contains header, footer, left-sidebar, middle part, right sidebar etc.

The common way to fix this issue is implementing a CSS class with Parent which automatically clears its children without needing additional coding for the children separately. This tactic is called Clearfix hack in which the CSS class name is typically given .clearfix (though class name can be anything).

However, before we enter the details of which properties and values are included in the .clearfix class and why, let’s explore a bit how much essential and relevant Clearfix is in the present context of language development.

Is Clearfix still relevant?

The clearfix issue is not a new one like you and me. It is since 2004 that clearfix fact put developers and designers into thinking and research which resulted in a number of property:value for .clearfix class. The name which comes first among the clearfix researchers is Holly Begevin.

But note that clearfix is only necessary when you need to build a layout on the basis of CSS float. Over the years since 2004, developers had to rely on Float, Block-inline, Table and so for designing of a layout which noway the perfect alternative to something essential for chalking-out a responsive website.

However it is to fulfill this historic necessity that there came grid and flexbox layout system in CSS. On arrival of grid and flexbox, Clearfix loses its importance to some extent but it is still relevant to the web developers and designers.

The most important reason for this is that Grid and Flexbox layouts are actually involved in the recent updates of CSS. So, they cover up supports of only the recent versions of Browsers. If you need supports of older Browsers, those layout modules are not applicable for you. So, it is obvious that implementation of float layout as well as Clearfix is still relevant in this age.

Properties for .clearfix class

When a child element is taller than its parent, it will overflow outside its container, then we can solve this by using overflow:auto with clearfix class. Follow example 1.

We take a container (parent) div and two elements (children) inside it. One is a Paragraph (p) with text and another an image (img). Observe the CSS coded.

    div < border: 3px solid #4CAF50; padding: 5px; >.img  
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
  

Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.

We see left-floated image has overflowed outside its container. Now let’s use Clearfix.

    div < border: 3px solid #4CAF50; padding: 5px; >.img < float: left; width:140px; height:140px; >.clearfix  
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
  

Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.

All are cleared and solved.

Other properties with clearfix class

Here are other properties that are used with Clearfix class especially for web layout and to place multiple HTML elements side by side-

However, we’re expecting to clarify all of these in any of our CSS tutorials next time.

Hope you have gained a crystal understanding of what Clearfix in CSS is.

Источник