清除浮动的方法

清除浮动的方法

1. 额外标签法(隔墙法)，W3C推荐做法

   在浮动元素末尾添加一个空的标签。

   例如
   html部分：
   <div class="purge"></div>
   css部分：
   .purge {
   	clear: both;
   }
   强调一下这个空标签必须是块级元素，还有这里的类名是自己定义的，这里用了purge（清除）当作类名。
   

2. 父级添加overflow属性

   给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll

   最常使用：
   overflow: hidden;
   

   注意：这种方式的缺点是无法显示溢出的部分，使用时确保无溢出！

3. 父级添加 :after伪元素

   :after方式也是给父元素添加类名

   css部分：
   .clearfix:after {
   	content: "";
   	display: block;
   	height: 0;
   	clear: both;
   	visibility: hidden;
   }
   .clearfix {   
   	*zoom: 1;                              
   }
   
   html部分：给父元素添加clearfix类
   

   这种清除浮动的方式没有增加标量，结构更简单一些，但是需要照顾低版本的浏览器，像IE6、7版本。百度，淘宝等大型企业都使用这种方式清除浮动。

4. 父级添加双伪元素

   :before、:after方式也是给父元素添加类名

   .clearfix:before, .clearfix:after {
   	content: "";
   	display: table;
   }
   .clearfix:after {
   	clear: both;
   }
   .clearfix {
   	*zoom: 1;
   }
   
   html部分：给父元素添加clearfix类
   

   这种方式清除浮动也是很多企业在使用的方式，比如小米、腾讯等,所以在清除浮动的时候推荐大家使用的哦^ = ^