Clear: both of Float in CSS is invalid.

CSS clear for Float: both has a new method every year. XD

2008 clear in 2010: both statement

However, we will see this article this year: Best Cross-browser CSS Clearfix solution. Compared with the previous article, we have added a few more parameters. What is the difference ~ Use it directly. XD

The float of CSS is quite convenient to use, but after it is used, the space will disappear, so you need to add clear: left/clear: right/clear below: both (I usually directly clear: both is ~), But sometimes the clear: both statement is written, but it does not work.

This article has long been intended to be written. I can see "why? The block cannot be opened due to float. "in this article, the description is complete, so you can write a conclusion directly ~~

I now use CSS to draw a "/* common */" block, and some shared classes will be defined over there. clear is related to the following:

The code is as follows:	Copy code
. Clear {zoom: 1; clear: both ;} . Clear: after {content: ''; display: block; clear: both; visibility: hidden; height: 0 ;}

This is mainly the two sections. When the float is finished, write <p class = "clear"> </p> ~

However, the first paragraph above ". clear {} "this section, some do not need to be added, or only write ". clear {zoom: 1 ;}", but it is a problem for me to use it, so I still add "clear: both. (It's a little different from the following method. I can't explain it now. In short, I remember it first. I may know it when I encounter it .. XD)

Want to know? Tell me? For more information, see the following two articles:

■ How to Fix external vulnerabilities caused by DIV float
■ How To Clear Floats Without Structural Markup (Clearing a float container without source markup)
Directly extract their conclusions, that is, add the clearfix class, which is a little different from what I used above, but I still don't know the difference. Let's test it again, they should be well written:

The code is as follows:	Copy code
. Clearfix: after { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; } . Clearfix {display: inline-block ;} /* Hides from IE-mac */ * Html. clearfix {height: 1% ;} . Clearfix {display: block ;} /* End hide from IE-mac */

CSS. clearfix (excerpt from the above: Best Cross-browser CSS Clearfix solution)

 

The code is as follows:	Copy code
. Clearfix: after { Content :"."; Display: block; Clear: both; Visibility: hidden; Line-height: 0; Height: 0; }   . Clearfix { Display: inline-block; }   Html [xmlns]. clearfix { Display: block; }   * Html. clearfix { Height: 1%; Overflow: visible; }

The solution for this year arrived in 2011. This article is available: A new micro clearfix hack # The following is taken from this article

 

The code is as follows:	Copy code
/* For modern browsers */ . Cf: before, . Cf: after { Content :""; Display: block; Overflow: hidden; } . Cf: after { Clear: both; } /* For IE 6/7 (trigger hasLayout )*/ . Cf { Zoom: 1; }