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

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

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

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. hierarchyviewer偶然不能使用的解决方法

    在DDMS的device中可以看到设备,并显示可以debug的状态,可以看到不显示进程的信息,但是hierarchyviewer也却不显示各个Window. 在控制台的打印信息如下: - hierar ...

  2. HIVE：用外连接替代子查询

    由于hive也支持sql,很多人会把hql跟标准sql进行比较,甚至有的时候会直接套用.hive不支持事务也不支持索引,更不支持追加写,但是对于一般的sql都是能够支持的.但是对于一些子查询确实无法支 ...

  3. IOC(控制反转)与DI（依赖注入）的个人理解。

    控制反转IOC(Inversion of Control)的三个需要理清问题: 1.谁控制了谁,控制了什么东西?IOC容器控制了依赖对象的创建. 2.谁得到了反转? 一般的应用程序是,直接创建依赖于该 ...

  4. EntityFramework 和 linq 判断是否在指定时间段内的方法

    EntityFramework: System.Data.Objects.EntityFunctions.DiffDays(DateTime.Now, inputTime)判断当前时间与指定时间相差多 ...

  5. AD10 怎样精确导入CAD 文件

    1. 在 AD10 中 PCB 的形状根据实际情况设定,设定的尺寸等信息略.2. CAD 导入的格式要 CAD2004 以下的版本,AutoCAD 文件(*.DXF 或*.DWG)即可. 3. ...

  6. HDU 5920 Ugly Problem 【模拟】 (2016中国大学生程序设计竞赛(长春))

    Ugly Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. C/S结构与B/S结构的特点分析

    C/S结构与B/S结构的特点分析 为了区别于传统的C/S模式,才特意将其称为B/S模式.认识到这些结构的特征,对于系统的选型而言是很关键的. 1.系统的性能 在系统的性能方面,B/S占有优势的是其异地 ...

  8. LR报-27727错误解决办法

    1.报如下错误:Action.c(4):Error-27727:Step download timeout(120 seconds) has expired when downloading reso ...

  9. Leetcode那点事儿

    1 .Two Sum 2.Add Two Numbers 3.Longest Substring Without Repeating Characters 7.Reverse Integer  26. ...

  10. Bzoj 1696: [Usaco2007 Feb]Building A New Barn新牛舍 中位数,数学

    1696: [Usaco2007 Feb]Building A New Barn新牛舍 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 394  Solve ...