在页面布局的时候，能够用绝对定位来实现，可是因为调整某个区块框时其它区块的位置不会对应的改变，所以这并非布局的首选方式。可是使用浮动的区块框能够向左或向右移动，直到它的外边缘碰到包括它区块的边框或还有一个浮动狂的边框为止。

而且因为浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的像就浮动框不存在一样。

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

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

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的移动。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">最后再介绍一个属性：clear（清除属性，指定一个元素是否同意有元素漂浮在它的旁边）

clear:none;

clear:left;

clear:right;

clear:both;

一共同拥有这么几种值，分别相应不同的清除效果。灵活使用这个属性，非常多的问题都能简单解决。

DIV+CSS区块框浮动设计的更多相关文章

  1. 17 ， CSS 区块、浮动、定位、溢出、滚动条

    1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...

  2. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  3. CSS区块、浮动、定位、溢出、滚动条

    CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称            属性值                ...

  4. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  5. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  6. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  7. DIV+CSS设计时浏览器兼容性

          近期用Div+css做了个企业网站,在浏览器中测试的时候确发现在IE7中显示正常的页面,在ie6中非常混乱,当时第一感觉就想到了兼容问题,可是百思不得其解应该从哪下手,经过一两天的查资料, ...

  8. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  9. 使用Div+CSS布局设计网站的优点

    网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div ...

随机推荐

  1. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. VB版本查询快递单号源码

    能查询各大快递单号,包括申通快递,圆通快递,韵达快递等国内超过90家以上快递单号查询, 如果想快速搭建一个快递单号查询站我推荐这个,这是地址www.aikuaidi.cn,我分享一个VB Functi ...

  3. 《Journey》风之旅人；

    俩个人在茫茫世界相遇,互不相识,却能互相取暖,一路旅程,看尽了美丽的风景,也共同经历了暴风雪,然而该来的人会来,该走的人会走,这不就是人生旅途?

  4. Data Guard配置后续检查

    Data Guard配置后续检查 1.打开生产端节点192.166.1.190上的数据库实例: SQL>startup; 2.打开容灾端节点192.166.1.60上的数据库实例: SQL> ...

  5. python关键字

    python有多少关键字? >>> import keyword >>> keyword.kwlist ['and', 'as', 'assert', 'break ...

  6. 在debug模式下运行不报错，换到release模式下报找不到某某库或文件的错。。解决办法

    我遇到的问题是:把edit secheme调到debug模式运行没有问题,然后调到release模式的时候报目录下没有libTuyoo.a 解决办法 把断开真机设备,用IOS device下relea ...

  7. DJANGO增加超级用户

    from django.contrib.auth.models import User user=User.objects.create_superuser('name','emailname@dem ...

  8. Android 两个Activity进行数据传送 发送

    Activity1:: Intent intent= new Intent(this, OtherActivity.class); String name = "heyiyong" ...

  9. ajax post data 获取不到数据，注意 content-type的设置

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...

  10. 分析WordPress主题结构是如何架构的？

    利用强大的技术,可以把基于WordPress的网站做成各种各样的形式,这除了要求WordPress主题开发人员精通HTML,PHP,JS,CSS等技术,还需要开发者掌握WordPress主题的框架.下 ...