About the Web page is not compatible with the removal of the floating board

Today to do the site, in 360 and Google are very good, but in Firefox appeared disorderly board, footer with the last div dislocation, footer up, in fact footerdiv on the line with Clear:both, clear his on both sides of the float, turn a person's

【

Do you really understand clear:both?

In the development, from the artist mm to you in the HTML code, certainly can often see "<div style=" clear:both; ></div>"Such code, but do you really understand what it is for?"

Such as:

<div style= "border:2px solid red;" >

<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>

<div style= "Clear:both;" ></div>

</div>

You can put this part of the code on an HTML page to see the effect, and then remove the "<div style=" clear:both; ></div>"Look at the effect , you will know the effect of this sentence."

(1) Clear:both:

(2) Non -Clear:both

In this way, should be at a glance: The original behind the Clear:both, in fact, the use of clear floating to the outer div open, so sometimes, we will set the internal div to float, we will find that the outer div background is not displayed, The reason is that the outer div is not open, too small, so you can see the background is limited to a line.

But is this the best way to do it?

I say so, of course the answer is not. Can be implemented via hack:

<style>

. clearfix:after{

Visibility:hidden;

Display:block;

font-size:0;

Content: ".";

Clear:both;

height:0;

}

* HTML. Clearfix{zoom:1;}

*:first-child + HTML. clearfix{zoom:1;}

</style>

<div class= "clearfix" style= "border:2px solid red;" >

<div style= "Float:left; width:80px; height:80px; BORDER:1PX solid blue; " >

TEST div</div>

</div>

After reading the solution, let's look inside the principle:

(1), the first is to use: After this pseudo-class to be compatible with FF,Chrome and other support standards browser.

: After pseudo-class IE is not supported, it is used in conjunction with the content property to set the contents after the object, for example:

A:after{content: "(link)";}

This CSS will add the link text text behind the text in the a tag .

(2), using "* html" This only IE6-aware selector, set the Zoom property "Zoom: 1;" Implement compatible IE6.

(3), using "*:first-child + HTML" This only IE7-aware selector, set the Zoom property "Zoom: 1;" Implement compatible IE7.

About the Web page is not compatible with the removal of the floating board