提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

CSS 一个 彻底解决
2023-09-11 14:21:01 时间

      上述博客文章，我们解释如何使用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;
}
效果图例如以下：




     那可能有人会问了：星哥。假设区块三使用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并没有使用浮动，大家理解起来会很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多人的解释，最终明确了。

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



版权声明：本文博客原创文章，博客，未经同意，不得转载。

相关文章