清除浮动的三种实用方法

小白专场，大佬绕道。本文有错，欢迎指出。不喜勿喷，和谐社会！

什么是浮动

概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

大兄弟你该不会真的把概念读完并且尝试理解它？要是真的话，我只能说一句“你牛批”。
小白是不需要去理解概念的，只需要知道效果到底是啥样的就ok了。

先看默认情况下的

html:

<div class="fuyuansu"><!-- 父元素 -->
		<div class="zuo"></div><!-- 左元素 -->
		<div class="you"></div><!-- 右元素 -->
	</div>

css:

.fuyuansu{
	width: 300px;
	border: 1px solid #ccc;
}
.zuo{
	width: 100px;
	height: 100px;
	background: red;
}
.you{
	width: 100px;
	height: 100px;
	background: blue;
}

效果图：

块级元素默认是独占整行，当想让div不独占整行，而是并排排列时，其中一种方法就是让元素浮动。

css代码修改为：

.fuyuansu{
	width: 300px;
	border: 1px solid #ccc;
}
.zuo{
	width: 100px;
	height: 100px;
	background: red;
	float: left;/*左浮动*/
}
.you{
	width: 100px;
	height: 100px;
	background: blue;
	float: right;/*右浮动*/
}

效果就变成了这样

添加浮动之后你会发现，元素并排了，但是父元素高度坍塌了。所以想让父元素重新拥有高度，我们就要做“清除浮动”。

清除浮动的方法很多，这里只介绍几种常用的：

方法一：给父元素添加overflow属性

css代码更新为：

.fuyuansu{
	width: 300px;
	border: 1px solid #ccc;
	overflow: hidden;/*添加overflow属性，值可以选择hidden或者auto*/
}

效果图：

优点：简单粗暴直接，代码量少，一个属性直接搞定。
缺点：当overflow的值设置为hidden的时候，会出现元素溢出隐藏效果。当overflow的值设置为auto的时候，元素超出父元素时，父元素会出现滚动条。

方法二：在浮动元素后面添加一个带有clear属性的div

html：

<div class="fuyuansu"><!-- 父元素 -->
	<div class="zuo"></div><!-- 左浮动元素 -->
	<div class="you"></div><!-- 右浮动元素 -->
	<div class="clear"></div>
</div>

css:

.fuyuansu{
	width: 300px;
	border: 1px solid #ccc;
}
.zuo{
	width: 100px;
	height: 100px;
	background: red;
	float: left;/*左浮动*/
}
.you{
	width: 100px;
	height: 100px;
	background: blue;
	float: right;/*右浮动*/
}
.clear{
	clear: both;/*添加clear:both,使这个div的左右两侧不允许浮动元素。*/
}

效果图：

优点：不会影响父元素或者子元素的样式。
缺点：会有冗余的页面元素，影响代码维护

方法三：使用父元素的after伪元素并添加clear:both （重点推荐）

第一步：定义一个样式名，给样式的伪元素添加clear:both

css:

.clearfix:after{
	content: "."; /*为什么要添加content？ 因为不加content伪元素不会出现*/
	height: 0px;/*为什么设置为height？ 将height设置为0，伪元素在页面中就不会占用位置，不会影响其他元素布局*/
	visibility: hidden;/*不知道这个属性干嘛用的就去百度，这里不解释*/
	display: block;/*为什么设置成块级？因为行内元素不能生效*/
	clear: both;/*元素左右两边不允许存在浮动元素*/
}

第二步：将新定义的样式名，添加到浮动元素的父元素上去

<div class="fuyuansu clearfix"><!-- 父元素 -->
		<div class="zuo"></div><!-- 左浮动元素 -->
		<div class="you"></div><!-- 右浮动元素 -->
	</div>

效果就会是这样

为什么会这样嘞？我们打开控制台检查一下页面元素

从控制台我们可以看到，伪元素在页面中位置，位于父元素内部的最底部，你回头看看方法二就会发现，这个伪元素的位置和方法二中添加的clear这个div的位置是一样的。所以方法三的原理和方法二的原理是一样的，都是通过添加带有在clear:both属性的元素在父元素内部的底部位置，来达到清除浮动效果。

这个方法是目前清除浮动最常用的方法，优点在于代码中不会出现冗余的代码，便于以后代码的维护，另外就复用性高，定义一个样式名，在需要清除浮动的地方就添加这个样式。做到“一次定义，多次使用”。由于样式是定义在伪元素上的，所以不会影响其他元素的样式。

接下来，我们来优化一下方法三

先来简化一下代码，这样书写代码也能达到上面一样的效果。

.clearfix:after{
	display: table;
	content: "";
	clear: both;
}

为了兼容IE6，IE7浏览器，我们将代码修改为

.clearfix{
	*zoom:1;
}
.clearfix:after{
	display: table;
	content: "";
	clear: both;
}

为了解决现代浏览器上边距折叠问题，我们还要再加入一些代码

.clearfix{
	*zoom:1;
}
.clearfix:after{
	display: table;
	content: "";
	clear: both;
}
.clearfix:before{		/*解决现在浏览器上边距折叠问题*/
	display: table;
	content: "";
}

再把添加的代码优化一下，就变成了

.clearfix{
	*zoom:1;
}
.clearfix:after,.clearfix:before{
	display: table;
	content: "";
}
.clearfix:after{
	clear: both;
}

总结一下，推荐的清除浮动方法就是
html :

<div class="fuyuansu clearfix"><!-- 父元素 -->
	<div class="zuo"></div><!-- 左浮动元素 -->
	<div class="you"></div><!-- 右浮动元素 -->
</div>

css:

.fuyuansu{
	width: 300px;
	border: 1px solid #ccc;
}
.zuo{
	width: 100px;
	height: 100px;
	background: red;
	float: left;/*左浮动*/
}
.you{
	width: 100px;
	height: 100px;
	background: blue;
	float: right;/*右浮动*/
}
.clearfix{
	*zoom:1;
}
.clearfix:after,.clearfix:before{
	display: table;
	content: "";
}
.clearfix:after{
	clear: both;
}

写在最后：你努力的样子，是我这辈子见过最帅的模样