Deep understanding of float

All of the techniques mentioned in this article are as far as I can cite. Reprint this article, please indicate the source: http://gwx.showus.net/blog/article.asp?id=163。

Recently in the use of float often love, so check the classics, especially according to CSS 18 skills of 13. Clear the floating guide, the float has a more in-depth understanding, I hope you criticize.

1. Problems arising when using float

A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond the outer range.


Way to solve

1. The old method--using Clear:both
The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both.



The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both.
CSS Method--use: After

This method is mentioned in the article "How to clear floats without structural Markup".
The original idea of the CSS stylesheet that the program code/* needs to use * * *
. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

/* Actual CSS style sheet (optimized for different browsers) * *
. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearfix {Display:inline-table}
/* Hides from Ie-mac \*/*
HTML. Clearfix {height:1%}
. clearfix {Display:block}
/* End Hide from Ie-mac * *




method of 2.CSS--Using overflow
The previous 2 methods can solve the problem of floating out well, but what if you really need to clear the layers or layers of objects? An easy way is to use the overflow attribute, which was originally published in Simple clearing of floats, and was widely discussed in clearance and Super simple clearing floats.

Program code/* The original idea of the CSS style sheet you need to use (ie does not work) * *
. Clearfix2{overflow:auto}

/* Actual CSS style sheet (optimized for different browsers) * *
. clearfix2{
_height:1%; The underline in front of the/*height is required.
Overflow:auto;
}