Properties of float:
1: Make the element block level;
2: The tight permutation characteristic caused by the destructive.
based on the above characteristics, so that we usually put the float to the layout, the problem is that it is prone to problems, reusability, ie6-version of a lot of issues, because it is required fixed width, the width calculation error will bring the entire layout of the confusion.
The Float property is originally intended to allow text to be wrapped around the picture to achieve the effect of the image and the flow layout, so the height of the parent element of float floats is not the problem we are talking about is a BUG, which in itself is the property of float.
here is the problem of resolving the height of the parent element caused by float floatTest for ie5+
1: Add a style to Clear:both after the floating element inside the parent element; The disadvantage is the addition of useless tag elements;
. clear{Clear:both; height:0px; font-size:1px; line-height:0px;overflow:hidden;} /* Clear FLOAT */
2: Add a pseudo-class to the parent element and give the style (. Fix on the parent element that contains the floating child element)
. Fix:after{content: "";d Isplay:block;height:0;overflow:hidden;clear:both;}
. Fix{*zoom:1;} Compatible with IE7 below
Or
. Fix:after{content: ""; Display:table; clear:both;}
. Fix{*zoom:1;}
3: Add a sentence directly to the parent element:
Parent element {Overflow:hidden;}
Resolves a problem where the height of the parent element of float floats is not---clear floating
