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

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

2024-07-13 22:53:38   227人阅读

      上面一篇博文，我们讲解了如何使用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多人的解释，终于明白了。当然，我敢肯定，我看的那些博客里有错误的讲解，但是本文在正确性上绝对可以放心的。。。


联系
我们