如何清除浮动的四种方法

清除浮动的本质

清除浮动元素脱离标准流造成的影响

清除浮动的策略

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外部的其他盒子

清除方法

1. 额外标签法也称隔离法，是W3C推荐的做法
   在浮动元素末尾添加一个空的标签。

"clear:both">
  
或


1
2
3

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

注意：新标签必须是块级元素

2. 父级添加overflow属性
   可以给父级div中添加overflow属性，将其属性值设置为hidden，auto或scroll。

3. 父级添加after伪元素
   ：after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {
	content : "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {/* IE6、7专有*/
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10

4. 父级添加双伪元素

.clearfix:before,.clearfix :after {
	icontent : " ";
	display:table;
}

.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11