CSS清浮动的6种方法

1.父元素定义height

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		height:200px;/* 解决代码 */
		background:red;
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客
	</div>
	<div class="right">
		鬼眼邪神的博客
	</div>
</div></span>

原理：手动定义父元素的高度，解决其不能自动获取高度的问题。

缺点：必须给出精确地高度，无法自适应。

2.利用空标签清浮动

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		background:red;
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
	/* 解决代码 */
	.clear {
		clear:both;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客
	</div>
	<div class="right">
		鬼眼邪神的博客
	</div>
	<div class="clear">
	
	</div>
</div></span>

原理：在父元素的关标签之前加入一空标签，用clear:both来清浮动。

缺点：如果需要清浮动的地方很多，则需要加入很多空标签，很麻烦。

3.父元素设置overflow:hidden

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		background:red;
		overflow:hidden;
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客
	</div>
	<div class="right">
		鬼眼邪神的博客
	</div>
</div></span>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden具有清除内部浮动的效果。

缺点：当与position配合使用时，有可能会造成内容被隐藏。

4.父元素定义伪类:after

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		background:red;
	}
	/* 解决代码 */
	.wrapper:after {
		display:block;
		clear:both;
		overflow:hidden;
		content:'';
		height:0;
		visibility:hidden;
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客，地址
	</div>
	<div class="right">
		鬼眼邪神的博客，地址
	</div>
</div></span>

原理：使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容来，并给它设置clear:both来清理浮动。

5.父元素定义overflow:auto

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		background:red;
		overflow:auto;/* 解决代码 */
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客
	</div>
	<div class="right">
		鬼眼邪神的博客
	</div>
</div></span>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

缺点：内容超出父元素宽高时会出现滚动条。

6.父元素设置float属性

<span style="font-family:Microsoft YaHei;"><style>
	.wrapper {
		width:600px;
		background:red;
		float:left;/* 解决代码 */
	}
	.left {
		float:left;
		width:30%;
		height:100px;
		background:yellow;
	}
	.right {
		float:right;
		width:30%;
		height:100px;
		background:green;
	}
</style>
<div class="wrapper">
	<div class="left">
		鬼眼邪神的博客
	</div>
	<div class="right">
		鬼眼邪神的博客
	</div>
</div></span>

原理：设置float:left|right之后，元素就会拥有一个布局。