如何清除浮动？

清除浮动的方法

一、 给父级元素设高（一般不推荐使用）
二、clear语法：

选择器{clear：属性值} clear：清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

ps：实际工作中我们几乎只用clear：both

三、额外标签法（隔墙法）

是在w3c推荐的做法是通过在浮动元素末尾添加一个空的标签，例如：<div style="clear:both"></div>或者其他标签（br）即可。

• 优点：通俗易懂，书写方便

• 缺点：添加许多无意义的标签，结构化较差

四、父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll  都可以实现

• 优点：代码简洁
• 缺点：内容较多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

五、使用after伪类元素清除浮动

  ：after方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

• 优点：符合闭合浮动思想，结构语义化正确
• 缺点：由于IE6-7不支持:after，使用zoom：1触发hasLayout。
• 代表网站：百度、淘宝网、网易等

六、使用双伪元素清除浮动

使用方法：

.clearfix:after,:clearfix:before{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

• 优点：代码更简洁
• 缺点：由于IE6-7不支持:after，使用zoom：1触发hasLayout。
• 代表网站：小米、腾讯等

清除浮动总结：

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签
父级overflow：hidden；	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题