1 //Remove the impact of the float;2 3 //method One: Add Clear:both after the element;4 //1.HTML Block horizontal element Bottom5<div style= "Clear:both;" ></div>6 //inadequate: Causes a lot of bare <div> tags;7 8 //2.CSS after pseudo-element bottom generation9 . Clearfix:after {}Ten //insufficient: After pseudo-element attribute, IE6/IE7 is not recognized; One A //method Two: Parent element BFC (ie8+) or haslayout (IE6/IE7); - float: Left/right; -positoin:absolute/fixed; theOverflow:hidden/scroll; (IE7) -Display:inline-block/table-cell; (ie8+) -width/height/zoom:1; (IE6/IE7) - + //strategy after trade-offs -. clearfix:after {content: ""; Display:block; height:0; Overflow:hidden; clear:both;} +. clearfix {*zoom:1;} A at //a better way -. clearfix:after {content: ""; display:table; clear:both;} -. clearfix {*zoom:1;}
css--Clear Float