Clearing floats clear floating -- usage of different Clearfix Methods

Clearing floating is already a required course for front-end developers. There is no doubt that we have been using a variety of floating clearance methods over the years, and now "Clearfix methods" is becoming increasingly familiar to everyone. Before in-depth analysis of the multiple usage of "Clearfix", let's take a look at what problems the Clearfix method is trying to solve.

　　Scenario:.el-1And.el-2Is floating side by side in.containerElement.mainThe element is closely related.container

　　Expected results:We want.containerTo the height of its child elements (for example:.el-1Or.el-2), We also hope that.mainYes.container.

　　Actual results:.containerFolded, and no height. Just as it does not contain content,.mainNot in the expected position, at the same time.containerThe background and border are also absent.

Based on the preceding scenario, the page code may be as follows:

<div class="container">  <div class="el-1">A long string of stuff here...</div>  <div class="el-2">A short string of stuff here...</div></div><div class="main">  Some stuff here...</div>

The CSS code may be as follows:

　

.el-1, .el-2 {  float: left;  width: 50%;}.el-1 {  /* styles for .el-1 here */}.el-2 {  /* styles for .el-2 here */}.container{  background:#ccc;  border:1px solid #000;}.main {  /* styles for .main here */}

Finally, the demo results are as follows:

Result

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

This is the. main element.

 

View the demo and check.containerAs you can see, it is indeed folded. You can see a black border on the top of the container and the background color is invisible. Therefore, the container of the iner does not contain.el-1.el-2, So.mainMove to an awkward place.

This is not a browser bug or a floats error. Floats is working like this. Many times the results are not as expected by our engineers. At this time, we simply need to "Clear the float ".

Clearing floats (clearfixing) is mainly used to force container elements to include its child elements. Therefore, it forces subsequent elements to be displayed under it. After many years, there have been many methods to clear floating. Before learning these methods, let's take a look at the CSSclearAttribute. Clear is one of the important attributes of CSS. We can use it to help the group solve this problem.

The "clear" Property

MDN is defined in this way.clear

The clear CSS Property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them

From the definition of clear, we can understand whyclearThe property can clear the floating clearly. Now let's explore some methods in depth.

Method 1: classroom methods

This method is an old method. The old method is relative. Of course, the old method is to use table layout (in this case, clearing floating is meaningless ). Taking this into consideration, floats needs to be used in the old method.

The idea is simple: InsertclearEmpty element of the property. Use a specified class to implement it so that it can be reused in HTML. This is a classic method for long-term use. The following is its CSS style:

.clear {  clear: both;}

The length of the HTML structure may be as follows:

<div class="container">  <div class="el-1">I‘m floated...</div>  <div class="el-2">I‘m also floated...</div>  <br class="clear"></div> <div class="main">  Bravo, sirs and madams. I‘m in the clear.</div>

The following is a demo implemented using this method.

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

This is the. main element.

Note:If you do not care about the collapsed container, but about.mainThen you can choose to put the "cleared" element behind the container. However, if you do this, you may also.mainProceedclear:both.

This method is often used a long time ago, and it is very easy to use. However, we want to separate the content from the style and use the persistence semantics. This method is no longer recommended.

Method 2: Overflow

Pair.containerDefinitionoverflowAttribute, which will extend the container to the height of the entire floating element. CSS:

.container {  overflow: hidden; /* can also be "auto" */}

HTML remains unchanged and no additional elements need to be added.

The demo is as follows:

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

This is the. main element.

As you can see, we have extended the container to the height containing the entire floating element. background colours and borders can be used successfully. Everything is fine.

However, a major disadvantage of this method is that if the sub-element exceeds the container, it will be hidden (overflow is den) or a scroll bar (overflow is auto) will be generated ). It is better than the previous method, but it is still not ideal. Let's continue our research.

Method 3: "Clearfix" Class

You may often hear it, but what is it? Everyone who pursues cool is using it, and you also want to use it. "Clearfix" (which means to fix floating clearing) defines.clearfixClass, which can be applied to any floating element. It will force the container element to expand and make subsequent elements under the container element. So how does it work? It uses the pseudo elements of CSS:::beforeAnd::after. Nicolas Gallagher describes it perfectly:

The... generates pseudo-elements and sets their display to table. this creates an anonymous table-cell... the: After pseudo-element is used to clear the floats. as a result... the total amount of code needed is already CED.

CSS:

.clearfix:before,.clearfix:after {  content: "";  display: table;} .clearfix:after {  clear: both;} .clearfix {  zoom: 1; /* ie 6/7 */}

Modify the HTML as follows:

<div class="container clearfix">  <div class="el-1">I‘m floated...</div>  <div class="el-2">I‘m also floated...</div></div> <div class="main">  Bravo, sirs and madams. I‘m in the clear.</div>

The demo for adding Clearfix is as follows:

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames AC turpis egestas. vestibulum tortor quam, feugiat Vitae, ultricies eget, Tempor sit Amet, ante. donec EU Libero sit Amet quam egestas semper. aenean ultricies mi Vitae est. mauris placerat eleifend Leo.

This is the. main element.

Chris coyier once suggested that if you do not need to execute the IE8 version, you only need to modify it like this:

.clearfix:after{  content:"";  display:table;  clear:both;}

Simple, efficient, semantic, and easy to reuse.

Note:The above code is called "micro Clearfix", and Nicolas Gallagher tries to promote it. The difference is that Nicolas uses different classes. Compared with the previous methods, Peter-Paul Koch and Thierry koblentz both have similar technologies. Basically, Clearfix has a long history, and the above methods are different iterations.

Method 4: futuristic star -- contain-floats

Interestingly, the W3C specification is alreadymin-heightAttribute (and min/MAX attribute) added a new value to help solve this problem. As follows:

.container {  min-height: contain-floats;}

It will implement the same effect as the Clearfix or overflow method, but it only requires a simple line of code and has no disadvantages we mentioned earlier. Of course, you can create a separate reusable Clearfix class in CSS.

It seems that no browser supports this value, but it is worth noting.

 

Summary

Yes, it's you, buddy. A quick way to complete "Clearfix..clearfixIt has become a standard. I strongly recommend this method instead of the first two methods. It will make life easier. Of course, the most suitable for you is the most effective, but, as mentioned above, I suggest you do not use method 1 now, stick to the standard Clearfix

Translated by clearing floats: an overview of different Clearfix Methods

Clearing floats clear floating -- usage of different Clearfix Methods