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

浏览数：24 / 时间：2015年06月09日

浮动，是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，并且我们修改一下区块三的宽度，让它更宽一些，要不解释不清楚，效果图如下：