清除浮动最常用的四种方法

1、为什么要清除浮动

开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。

所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性

2、清除浮动的四种方法

第一种方法：额外标签法

该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 html 代码所示：
html代码

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
  <div class="clear" style="clear: both;"></div>  <!-- 添加一个空的标签 -->
</div>

第二种方法：父元素添加 overflow: hidden

html代码

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

css代码

<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	.app{
		overflow: hidden; /* 父元素添加 overflow 属性清除浮动 */
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

第三种方法：:after 伪元素法，为父元素清除浮动

html代码

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

css代码

<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	/* --------以下两行样式代码为固定写法--------  */
	.clearfix:after{
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

优点：没有额外增加标签，结构简单

第四种方法：:after和:before双伪元素清除浮动

html代码

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

css代码

<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	/* --------以下两行样式代码为固定写法--------  */
	.clearfix:after,.clearfix:before{
		content: '';
		display: table;
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

总体来说，第四种方法和第三种方法并没有多大的区别，改动只有一点点，也使代码更加简洁了。

3、结语：

好啦，以上四种清除浮动的方法，最常用也就只有第二第三种还有第四种方法，有何疑问可留言评论！！！