清除浮动的三种方法

浮动布局，float:left;会使当前元素脱离文档流，从而失去对父级元素的支撑，如果此时父级元素没有设置高度，下面的元素就会挤上去，因此需要清除浮动

清除浮动的三个常用方法：

1. 给浮动元素的父级元素设置overflow:hidden;
2. 在浮动元素的同级下添加一个空标签，并且设置clear:both;
3. 浮动元素的父级元素使用::after{clear:both;content:'';display:block;}

代码演示：

	
	



	

		

			
测试
			
测试
			
测试
		
	

	

		

			
测试
			
测试
			
测试
			

		
	

	

		

			
测试
			
测试
			
测试
		
	

效果：

                       

说明：

其实，方法2、3的思路使一样的，都是在浮动元素的同级新添加一个空标签，然后设置clear:both;我们知道，::after是伪元素选择器，即在被选中的元素后面创建一个伪元素，跟手动添加的标签能达到一样的效果。

另，方法二在新添加标签时，不能使用与浮动元素相同的标签，比如这里的li是浮动的，手动新添加的标签就不能是li，否则会出错。