辛星彻底帮您解决CSS中的浮动问题

     浮动,是CSS布局中必须经过的一道坎,如果不熟悉浮动,那么CSS的布局就如同空中楼阁,而谈到浮动,更多的是和div相结合,div是一个块级元素,这个我前面的博文有介绍,如果大家喜欢我的风格,可以搜索下。

     下面我们进入正题,所谓浮动,可以用css的属性float来定义,比如float:left就是向左浮动,float:right就是向右浮动,我们先看一个不浮动的例子把,首先是这个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>
然后我们写一下它的对应的my.css文件,内容如下:

#demo1{
	background-color: #933;
	height: 100px;width:300px;
	 }
#demo2{
	background-color: #0F0;
	height:60px;width:200px;
}
#demo3{
	background-color: #F00;
	height: 140px;width: 80px;
}
#demo4{
	background-color: #CCC;
	height: 80px;width: 180px;
}
那么此时它的界面如下:

 下面我们通过在第二个div那里让它右浮动,添加下面一条信息,即:

#demo2{
	float: right;
	background-color: #0F0;
	height:60px;width:200px;
}
我上面只给出了demo2的变化,然后我们看下面的效果:

       下面说一下什么是“普通流”,可能这是会让新手朋友特别迷茫的一个话题,所谓普通流,就是向书本一样,从上到下,从左到右进行布局,正常的HTML元素都是在普通流中的,而一个元素一旦浮动,它就不在普通流中了。比如我们的区块2是右浮动的,它会去寻找他的上边一个元素,它上一个元素是区块1,而区块1是普通流中的元素,则区块2就和区块1的底部是对齐的,普通流决定了它的上下位置,浮动只能决定它的左右位置,一旦上下位置 被确定,那么接下来就是它的左右位置了,由于它是右浮动,因此,它在右边。而区块三去找它的上一个元素,发现它的上一个元素是标准流中的元素,因此,它会自动和区块1的低端对齐,并且向下排列。

        那可能有人会问,如果区块2左浮动呢,我们把demo2的float属性修改为left,并且我们修改一下区块三的宽度,让它更宽一些,要不解释不清楚,效果图如下:



     我想上图的解释也算比较清楚了,就不再文字说明了。可能有人会问,那么如果两个区块一起浮动呢?我们先来看都是右浮动的情形:


       由于这里的宽度足够宽,这种布局完全放得下,但是,如果我们把宽度变窄呢?看下面图解:


其实这里还算好理解的,那么我们继续向左拉伸呢?会出现下面的情况:


其实只要宽度足够宽,区块3依然是和区块2的左边而不是在它的下面,但是宽度太低的情况下就不是这样了,它很无奈的跑到了区块2的下面,然后另起一行,从右边开始排列。

其实右浮动会定位了,那么左浮动也就很清楚了,它的效果如下:


其实同样的,如果空间过小,那么区块3也会被挤下去,挤到新的一行中,如下代码:



      于是,可以总结为这么一句话:“浏览器首先对处于普通流的区块进行排列,它们很简单,从上到下进行排列即可。对于浮动的元素,它会查看它上面的元素最近的哪一个处于普通流中的元素,并且把它的底端当成自己的顶端,然后根据浮动规则,继续排列。由于是先进行的普通流的布局,因此,浮动的元素会遮盖普通流中的元素。”

     这一节先讲到这里啦。。。 下面再开始说清楚浮动的。。。。




辛星彻底帮您解决CSS中的浮动问题,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。