清除浮动呢，并不是真的把float清除了，而是清除浮动带来的影响。比如有时候父元素高度不确定，没有设置高度，这个时候父元素的高度就由内容（子元素）撑开，但是如果它里面的子元素设置了float，那么父元素的高度就会消失，也叫高度塌陷。所以清除浮动，是为了解决高度塌陷等问题。
清除浮动的方式：
方式一：在能够给父元素设置高度的情况下（父元素高度固定），可以直接给父元素设置高度。
方式二：在父元素的最后一个子元素后面加一个元素，不过这种增加了DOM，使元素冗余，不建议使用。
<div class="box"> <div class="son"></div> <div class="son"></div> <div style="clear:both;"></div> </div>
方式三：使用单伪元素:after清除浮动，先给父元素一个类名clearfix。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix:after{ content: ''; height: 0; display: block; visibility: hidden; clear: both; } .clearfix{ *zoom: 1;/* 触发IE6、IE7 */ } </style> </head> <body> <div class="clearfix box"> <div class="son"></div> <div class="son"></div> </div> </body> </html>
方式四：使用双伪元素清除浮动，依然是先给父元素一个类名clearfix（取其他名字也可以，直接用标签 表示也可以，不过这样规范一点）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix:before,.clearfix:after{ content: ''; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1;/* 触发IE6、IE7 */ } </style> </head> <body> <div class="clearfix box"> <div class="son"></div> <div class="son"></div> </div> </body> </html>
方式五：就是能够解决一些莫名其妙的问题的overflow:hidden;但是一般不建议使用，因为可能会影响到其他的东西。
……enen,应该还有其他方式的，不过暂时就只总结出这么多了……再更进吧……