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

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

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

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. 关于【键鼠<局域网>共享软件：synergy】install

    Installation 另外,本人在centos6.5环境下作为server运行时,遇到一个问题,synergy1.5随着系统升级居然变成了1.3X,所以如果遇到类似问题,请您先用 rpm -qa ...

  2. python第一次上机遇到的困难

      正确 10 58 27412 2-1019 长度转换程序(10分) 完善下面的程序,能够: (1) 将用户输入的公制长度单位(米.千米)转换成英制长度单位(英寸.英里): (2) 将用户输入的英制 ...

  3. （MVC）验证用户是否登录 登录认证

    验证类 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  4. iOS网络

    iOS开发系列--网络开发 2014-10-22 08:34 by KenshinCui, 1253 阅读, 19 评论, 收藏,  编辑 概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微 ...

  5. Hadoop 2.6.0编译on mac

    花了一个晚上的时间弄了下hadoop的编译环境,碰到些错误,这里保存下. 需要编译Hadoop,不但需要安装Maven,还需要安装protobuf 安装Maven 下载:apache-maven-3. ...

  6. Contest20140711 loop 数论

    loop|loop.in|loop.out 题目描述: 有N个点. 现在重复这样的操作: 随机找一个出度为0的点p1,随机找一个入度为0的点p2,连一条有向边从p1指向p2.直到没有出度为0的点. 统 ...

  7. 听同事讲 Bayesian statistics: Part 1 - Bayesian vs. Frequentist

    听同事讲 Bayesian statistics: Part 1 - Bayesian vs. Frequentist   摘要:某一天与同事下班一同做地铁,刚到地铁站,同事遇到一熟人正从地铁站出来. ...

  8. kafka java示例

    http://www.open-open.com/lib/view/open1407942131801.html http://www.open-open.com/lib/view/open14079 ...

  9. Ubuntu小技巧——怎样安装谷歌Chrome浏览器

    对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的.在Ubuntu上安装谷歌Chrome的方法有很多.一些用户喜欢直接在谷歌Chrome下载页面获得 d ...

  10. Git fork指令

    ​ork并且更新一个仓库 现在有这样一种情形:有一个叫做Joe的程序猿写了一个游戏程序,而你可能要去改进它.并且Joe将他的代码放在了GitHub仓库上.下面是你要做的事情: fork并且更新GitH ...