首页 > 代码库 > DIV+CSS区块框浮动设计

DIV+CSS区块框浮动设计

2024-07-14 02:12:47   224人阅读

在页面布局的时候，可以用绝对定位来实现，但是由于调整某个区块框时其他区块的位置不会相应的改变，所以这并不是布局的首选方式。但是使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动狂的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的像就浮动框不存在一样。

这篇文章就总结几种简单的区块框浮动的例子：

1.不浮动区块框排序

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			body{
					margin:0px;
			}
			div{
					width:200px;
					height:200px;
					font-size:40px;
					text-align:center;
			}
			#one{
				background:red;
			}
			#two{
				background:green;
			}
			#three{
				background:yellow;
			}
		</style>
	</head>

	<body>
			<div id="one">
				框（1）
			</div>
			<div id="two">
				框（2）
			</div>
			<div id="three">
				框（3）
			</div>
	</body>
</html>

2.将第一区块框向右浮动

重新定义#one选择器，只需要添加一行代码：

			#one{
				float:right;
				background:red;
			}

运行结果如下：



3.设置第一个向左浮动

为了能让大家看出效果，必须要调整三个区块的大小，所以直接重新写代码了。

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			body{
					margin:0px;
			}
			div{
					height:200px;
					font-size:40px;
					text-align:center;
			}
			#one{
				width:200px;
				float:left;
				background:red;
			}
			#two{
				width:240px;
				background:green;
			}
			#three{
				width:200px;
				background:yellow;
			}
		</style>
	</head>

	<body>
			<div id="one">
				框（1）
			</div>
			<div id="two">
				框（2）
			</div>
			<div id="three">
				框（3）
			</div>
	</body>
</html>

运行结果：

不难看出，框（2）被框（1）给覆盖了。只有多出来的40px的宽度能看见。因为框（1）浮动之后，就不属于文档流范围，相当于它原先的位置空了出来，所以框（2）自然就补了上去。

4.设置三个框都向左浮动

这个只需要在例1中的div{ }中加一句代码：

float:left;
运行效果：


5.设置三个框向左（空间不足）

只需要相应的修改三个区块的大小即可

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			body{
				margin:0px;
			}
			div{
				float:left;
					
				height:200px;
				font-size:40px;
				text-align:center;
			}
			#one{
				width:500px;
				background-color:red;
			}
			#two{
				width:400px;
				background:green;
			}
			#three{
				width:600px;
				background:yellow;
			}
		</style>
	</head>

	<body>
			<div id="one">
				框（1）
			</div>
			<div id="two">
				框（2）
			</div>
			<div id="three">
				框（3）
			</div>
	</body>
</html>
运行结果：

空间不足的话，区块就自动下移了

6.第三个区块被第一个“卡住”

区块3在上面没有足够的空间，下移的时候，区块1多出的部分会自动阻挡区块3的移动。

最后再介绍一个属性：clear（清除属性，指定一个元素是否允许有元素漂浮在它的旁边）

clear:none;
clear:left;
clear:right;
clear:both;
一共有这么几种值，分别对应不同的清除效果。灵活使用这个属性，很多的问题都能简单解决。


联系
我们