辛星跟您彻底解决CSS中的浮动（下）

浏览数：23 / 时间：2015年06月09日

上面一篇博文，我们讲解了如何使用CSS中的浮动，这一篇我们来讲解一下如何清除CSS中的浮动，其实CSS中的浮动的清楚很简单，只需要使用clear属性就可以了，至于怎么用好它，很多人可能一投雾水，我在初学的时候也是经常找不着北，就好像清除浮动是个随机事件一样，当然，它不是，它的规律性很强，就让辛星来给您剖析一下这个规律把。

首先还是上面的HTML文件，它的内容如下：

<html>
<head>
	<link rel="stylesheet" type="text/css" href="my.css">
</head>
<div id = "demo1">区块1</div>
<div id = "demo2">区块2</div>
<div id = "demo3">区块3</div>
<div id = "demo4">区块4</div>
</html>

然后是下面的CSS文件，我们还是摘抄一下：

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	background-color: #F00;
	height: 140px;width: 250px;
}
#demo4{
	background-color: #CCC;
	height: 80px;width: 180px;
}

其实要用clear清除浮动，紧紧抓住定义就可以了：clear的取值可以有四个，分别是none，left，right和both。大家一定要注意一点，那就是它是清除浮动，它清除的谁的浮动，它清除的是前一个的浮动，比如clear:none，这个和没写一样，clear：left表示如果前一个是浮动元素，那么它不能在该元素的左边浮动，即如果我的clear属性是left，我绝对不允许有一个在我左边浮动的元素，取值为right即我不允许我的前一个在我右边浮动，取值为both，即我不允许我的前一个元素在我任何一边浮动。

我们可以让区块2右浮动，让区块3清除浮动，但是它本身不浮动，区块4也不浮动，那么代码如下：

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	float: right;
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	clear: both;
	background-color: #F00;
	height: 140px;width: 250px;
}
#demo4{
	background-color: #CCC;
	height: 80px;width: 180px;
}

效果图如下：

那可能有人会问了：星哥，如果区块三使用clear：left，是不是就会紧挨着区块1了，答案是这样的，我们修改CSS代码如下：

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	float: right;
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	clear: left;
	background-color: #F00;
	height: 140px;width: 250px;
}
#demo4{
	background-color: #CCC;
	height: 80px;width: 180px;
}

结果图如下：

上面我们的区块3并没有使用浮动，大家理解起来会非常容易，那么如果区块三使用了右浮动呢？看下面代码：

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	float: right;
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	clear: both;
	float: right;
	background-color: #F00;
	height: 140px;width: 250px;
}
#demo4{
	background-color: #CCC;
	height: 80px;width: 180px;
}

下面是效果讲解：

那么此时大家可能会想，如果我的区块四清除了右浮动又该如何呢?

此时css代码变成：

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	float: right;
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	clear: both;
	float: right;
	background-color: #F00;
	height: 140px;width: 250px;
}
#demo4{
	clear: both;
	background-color: #CCC;
	height: 80px;width: 180px;
}

此时的效果如下：