Complex steps to clear float: left after float: left in CSS

Previously, because the company specialized in CSS + Div slicing designers, I have always paid attentionProgramDesign and development. Now, because some web site projects need to be created, CSS and jquery are learned in their free time.

Currently, most horizontal navigation is implemented through ul-> li * n->. As I know, there are several methods to achieve this effect.

1. Traditional processing methods:

 
Li {float: Left;}/*. For a fixed-width navigation bar, Li cannot be automatically centered */
 

 

2. inline-block method:

 
Ul {text-align: center; font-family: simsun; font-size: 14px;} li {display: inline-block; * display: inline; ZOOM: 1; margin-Right:-0.5em; * margin-Right: 0;} A {display: block;}/* display in the row and center horizontally; display: inline; ZOOM: 1; is the hack for IE, and margin-Right: 0.5em is used to sew on modern browsers ,*/
 

 

There is a gap between the Li in Firefox and chrome browsers. Google knows that the gap is generated by the font size, so hack is added to remove the gap.

AboutZoom: 1; role, you can see the help documentation, address: http://www.yesky.com/imagesnew/software/css/css2/c_zoom.html

 

Among the two implementation methods, float: Left is better than display: inline. Because inline (display: inline;) is a row layout, its feature is to layout in a row, so the width and height cannot be set.The layout of block-level elements is much more precise than that of inline styles. Use float: left;
 

When we use float: Left, we find that the DIV of the parent element is not opened. Normally, we need to clear the floating. This is also the method currently used by our company. For example:

 

 

<Div> <ul style = "float: left "> <li> <a href =" # "> 1 </a> </LI> <li> <a href =" # "> 2 </a> </LI> <li> <a href = "#"> 3 </a> </LI> </ul> <! -- Float needs to be cleared --> <Div style = "clear: both"> </div>
 

 

 

 

After using this method for a long time, you must add a <Div style = "clear: both"> </div> label each time you write repeater binding, I have not noticed this before. when I re-wrote the style today, I searched the internet for an alternative method. I found an article on how to clear floats without structural markup in Google.Article, Flexible handling of the floating clearance problem

First, SetCodeIs:

 
. Clearfix: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
 

 

In this way, we only need to introduce this Clearfix class to the parent Div, that is

 
<Div class = "Clearfix"> <ul style = "float: left "> <li> <a href =" # "> 1 </a> </LI> <li> <a href =" # "> 2 </a> </LI> <li> <a href = "#"> 3 </a> </LI> </ul> </div>
 

 

 

The principle of this CSS is to use the after pseudo object, which will add content at the end of the element that applies Clearfix, that is, ". ", and set it to block-level elements (display =" Block "); height to 0, clear =" both ", and hide the content (visibility = "hidden "). in this way, the block-level elements will be supported.

However, ie does not support it. Therefore, if you need to be compatible with IE, you can set a hack.

As follows:

 
. Clearfix: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden;} * html. Clearfix {ZOOM: 1 ;}
 

 

In this way, the class can be referenced only in the parent Div to solve the tedious clearing steps.

The following code clears the floating status of other websites:

 
/* Clear both method of Douban */. clearfix: After {content: ". "; display: block; Height: 0; clear: Both; visibility: hidden }. clearfix {ZOOM: 1; display: inline-block; _ Height: 1px} * HTML. clearfix {Height: 1%} * + HTML. clearfix {Height: 1% }. clearfix {display: block}/* method of Xiami */. clearfix: After {content :". "; display: block; Height: 0; clear: Both; visibility: hidden ;}. clearfix {ZOOM: 1 ;}