首页 > 代码库 > 辛星跟您彻底解决CSS中的浮动(下)

辛星跟您彻底解决CSS中的浮动(下)

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

    首先还是上面的HTML文件,它的内容如下:

<html>
<head>
	<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"my.css">>

然后是下面的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;
}
此时的效果如下:




到这里,我要讲的就全部讲完了,当我还是个小菜鸟的时候,也是一头雾水,听得迷迷糊糊,但是,我看了N多人的博客,听了N多人的解释,终于明白了。当然,我敢肯定,我看的那些博客里有错误的讲解,但是本文在正确性上绝对可以放心的。。。