Clearfix clears floating history and clearfix floating history

Clearfix clears floating history and clearfix floating history

I think everyone should have a deep understanding of the usage of clearing float when writing CSS. Today we will discuss the history of clearfix.

 

Clearfix clear floating

First of all, we used to clear floating many years ago.

. Clear {clear: both; line-height: 0 ;}
Currently, you may also see such code on many old websites, which effectively solves the floating problem. However, there is a fatal flaw in this usage, that is, an empty label should be added each time the floating is cleared.

If the Complex layout of a page needs to be clear and floating frequently, many empty labels will be generated, and useless page labels will be added, which is not conducive to page optimization. However, I found that large websites still use this clear Floating Method. If you are interested, you can search for the style name ". blank0" on the homepage.

As a result, many gods have developed the clearfix clearing floating method, which directly solves the above defects and does not need to add null labels. Simply add this style to the floating outer layer, this is also the clearfix history that we will discuss today.

Origin

. Clearfix: after {
Visibility: hidden;
Display: block;
Font-size: 0;
Content :"";
Clear: both;
Height: 0;
}
. Clearfix {display: inline-table ;}

* Html. clearfix {height: 1%;} // Hides from IE-mac
. Clearfix {display: block;} // End hide from IE-mac
Explain the above Code:

The first declaration block is applied to most browsers that comply with the standard. The purpose is to create an invisible block with empty content to clear the float for the target element.
The second is the display attribute of the clearfix application inline-table, which is only for IE/Mac. Use * to hide some rules for IE/Mac:
Height: 1% is used to trigger haslayout in IE6.
Re-display the attribute of the IE application block outside IE/Mac.

The last line ends the hack for IE/Mac. (Do you think it is very boring, and there is Internet Explorer under Mac)

It may be very early to start the source code, and then IE5 under Mac will also develop to IE6, and various browsers will begin to integrate with W3C standards. Therefore, the following code appears.

. Clearfix: after {
Visibility: hidden;
Display: block;
Font-size: 0;
Content :"";
Clear: both;
Height: 0;
}
* Html. clearfix {zoom: 1;}/* IE6 */
*: First-child + html. clearfix {zoom: 1 ;}/ * IE7 */
IE6 and IE7 do not support the pseudo-class "after". Therefore, the following two pseudo classes are required to trigger haslayout of IE6/7 to clear the float. Fortunately, IE8 supports the following pseudo classes: after. Therefore, only the hack for IE6/7 is required.

Add a div package with the clearfix attribute on the outer layer of a float attribute element to ensure the height of the external div, that is, clear "the floating element is out of the Document Stream, the problem that div surrounded by images and text does not occupy space.

Jeff Starr uses two statements for IE6/7 to trigger haslayout. I was wondering why the author did not directly use * to apply zoom: 1 to IE6/7 or write it directly as follows:

. Clearfix: after {
Visibility: hidden;
Display: block;
Font-size: 0;
Content :"";
Clear: both;
Height: 0;
}
. Clearfix {* zoom: 1 ;}
However, for many of you, this degree of optimization code is still not powerful enough. clearfix has been developed into the current two Release versions.

Rebuild clearfix floating

There are several methods to construct the Block Formatting Context:

The float value is not none.

The value of overflow is not visible.

The value of display is table-cell, table-caption, or inline-block.

The position value is not relative or static.

Obviously, float and position are not suitable for our needs. You can only select one from overflow or display.

Because the menus of. clearfix and. menu are applied, they are very likely to be multilevel. Therefore, overflow: hidden or overflow: auto does not meet the requirements.

(The drop-down menu is hidden or the scroll bar is displayed.

We can set the display value of. clearfix to any one of table-cell, table-caption, and inline-block.

However, the display: inline-block will generate extra white space, so it is also excluded.

The rest is only table-cell and table-caption. To ensure compatibility, you can use display: table to make. clearfix form a Block Formatting Context.

Because the display: table generates some anonymous boxes, one of these anonymous boxes (the display value is table-cell) will form the Block Formatting Context.

In this way, our new. clearfix will close the floating of internal elements.

Some people have made improvements later:

Release Version 1:

. Clearfix: after {
Content: "\ 200B ";
Display: block;
Height: 0;
Clear: both;
}
. Clearfix {* zoom: 1;}/* IE/7/6 */
Explanation: content: "\ 200B". The Unicode character contains a "zero-width space", that is, U + 200B, instead of the original ". to reduce the amount of code. Visibility: hidden is no longer used.

Release Version 2:

. Clearfix: before,. clearfix: after {
Content :"";
Display: table;
}
. Clearfix: after {clear: both ;}
. Clearfix {
* Zoom: 1;/* IE/7/6 */
}
The two Release versions of the Code are concise and can be used in both the two versions. The above code has been tested. Please use them now. If you have any questions, please give me feedback in time, if you are still stuck in the old clearfix code, update the code.