html常见的清除浮动的三种方式

常见的清除浮动的三种方式

1. 在浮动元素的末尾添加一个标签，添加css属性clear:both让其清除浮动。 请看下面代码：

		

		

		

		



	  *{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 100px;
			height: 100px;
			background: pink;
			border:1px solid black;
			float: left;
		}
		.clear{
			clear: both;
		}

这种方案虽让能够清除浮动，但是会改变html的结构不是特别推荐使用。但是也可以使用

2.利用伪元素清除浮动流

	

		

		

		

	
	
	   *{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 100px;
			height: 100px;
			background: pink;
			border:1px solid black;
			float: left;
		}
		.box::before,.box::after{
			content:'';
			display: block;
			clear: both;
		}

这是比较常见的方法，推荐使用

3. 利用overflow:hidden

	

		

		

		

	
	
	   *{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 100px;
			height: 100px;
			background: pink;
			border:1px solid black;
			float: left;
		}
		.box{
			overflow: hidden;
		}