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

浮动

注意：浮动不能占据padding的位置

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

浮动可以解决多个div在同一行的问题（推荐使用float,最好不要使用inline-block）

具体查看css教程：http://www.w3school.com.cn/css/css_positioning_floating.asp

注意：

当上面两个盒子浮动的时候，为了不影响第三个盒子的位置，必须给浮动的两个盒子加一个父盒子，并且这个父盒子要给一个高度。否则，第三个盒子会往上移，占据父盒子的位置(因为此时没有高度，并且子盒子浮动，所以父盒子相当于一条线，第三个盒子自然就往上移动)。**解决问题：有时候不方便给父盒子高度，所以用清除浮动来解决。**

以下方法可以解决上面的问题

1、额外标签法: 在最后一个浮动标签后添加一个空标签

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			border:1px solid red;	/*父盒子不给高度，（因为父盒子是根据子盒子的高度来的，不知道具体给多少）*/
		}
		.son {
			height: 100px;
			width: 100px;
			background-color: yellow;
			float: left;
		}
		.small {
			height: 150px;
			width: 100px;
			background-color: blue;
			float: left;
		}
		.clear {
			clear: both;	/*清除浮动*/
		}
		.footer {
			height: 200px;
			width: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
		<div class="small"></div>
		<div class="clear"></div> <!--  添加空标签清除浮动  style: clear: both -->
	</div>
	<div class="footer"></div>
</body>
</html>

**2、overflow清除浮动**

给父盒子添加overflow

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			border:1px solid red;
			overflow: hidden;  /*清除浮动*/
		}
		.son {
			height: 100px;
			width: 100px;
			background-color: yellow;
			float: left;
		}
		.small {
			height: 150px;
			width: 100px;
			background-color: blue;
			float: left;
		}
		.footer {
			height: 200px;
			width: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

**3、用after伪类清除浮动**

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix{
			*zoom: 1; 	/*zoom: 1 是ie6清除浮动的方法， * 是ie7以下的版本识别的符号*/
		}
		.father {
			border:1px solid red;
		}
		.son {
			height: 100px;
			width: 100px;
			background-color: yellow;
			float: left;
		}
		.small {
			height: 150px;
			width: 100px;
			background-color: blue;
			float: left;
		}
		.footer {
			height: 200px;
			width: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father clearfix">  /*给父盒子加clearfix类*/
		<div class="son"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

**4、双伪元素清除浮动**

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.clearfix:after, .clearfix:before {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix{
			*zoom: 1; 	/*zoom: 1 是ie6清除浮动的方法， * 是ie7以下的版本识别的符号*/
		}
		.father {
			border:1px solid red;
		}
		.son {
			height: 100px;
			width: 100px;
			background-color: yellow;
			float: left;
		}
		.small {
			height: 150px;
			width: 100px;
			background-color: blue;
			float: left;
		}
		.footer {
			height: 200px;
			width: 300px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="son"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

好了，常用清除浮动就介绍到这里了，还有其他方法小伙伴们自己发掘去吧，喜欢的朋友点个赞！谢谢！

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

浮动

猜你喜欢