上面一篇博文,我们讲解了如何使用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;
}
此时的效果如下:
到这里,我要讲的就全部讲完了,当我还是个小菜鸟的时候,也是一头雾水,听得迷迷糊糊,但是,我看了N多人的博客,听了N多人的解释,终于明白了。当然,我敢肯定,我看的那些博客里有错误的讲解,但是本文在正确性上绝对可以放心的。。。