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

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

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

<div class="box">
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
		<div class="clear"></div>
</div>

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

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

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

	<div class="box">
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
	</div>
	
	   *{
			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

	<div class="box">
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
	</div>
	
	   *{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 100px;
			height: 100px;
			background: pink;
			border:1px solid black;
			float: left;
		}
		.box{
			overflow: hidden;
		}