辛星与您彻底解决CSS浮子（下一个）

上述博客文章，我们解释如何使用CSS浮子，这是一个看我们如何解释清除CSS浮子。其实CSS浮动是很清楚easy，只需要使用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;

}

效果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

那可能有人会问了：星哥。假设区块三使用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;

}

结果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

上面我们的区块3并没有使用浮动，大家理解起来会很easy。那么假设区块三使用了右浮动呢？看以下代码：

#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多人的解释，最终明确了。

当然。我敢肯定，我看的那些博客里有错误的解说，但这在绝对正确性可以放心。。。

巴特西

辛星与您彻底解决CSS浮子（下一个）

最新文章

热门文章