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

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

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

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. [CSS]overflow内容溢出

      定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...

  2. Django 基础

    Django 的路由系统 在 django 的 URLconf 配置文件 urls.py 中根据一个 URL 对应 views 的一个函数来处理用户的请求. 1.基本的 urls 对应 urlpatt ...

  3. iOS: 学习笔记实例, 用代码控制视图创建与切换

    1. 创建iOS, Single View Application.2. 修改YYViewController.m // // YYViewController.m // DynamicViewDem ...

  4. Cinder-1 TinderBox

    Cinder:http://libcinder.org/,当前版本是0.8.5,代码托管位置:https://github.com/cinder/Cinder.git 下载Cinder之后,其目录结构 ...

  5. make xxx Is a directory. Stop.

    转自:make xxx Is a directory. Stop. 的原因 make xxx Is a directory. Stop. 的原因 编译内核时候的一个错误提示 make: ***    ...

  6. 写了几天的博客-feel

    写博客 真的总结我自己的知识.长见识了.记录下自己遇到的东西,算是一个总结,有问题了,还可以回头看一下.很好 真的很好.

  7. IE8，IE9，IE10绿色版，以及ColorPix

    对于开发者而言IETest是一坨屎. 但是我们终于迎来的蛋糕和火腿,今天无意间发现了竟然有绿色版的浏览器版本,IE9,IE10已经下到本地,IE8网传是有的,但是没有找到合适的版本.但是足够了,本机使 ...

  8. MVC架构学习

    作为一名小小的GreenBird,学习MVC呢,已经花费了2天了,期间得到了美丽的学姐的帮助,初步整理了一下. 首先,学习MVC呢就先以一个标准的MVC的简单的例子来入手,然后根据学姐的PPT,我用v ...

  9. [操作系统]iOS6与iOS7屏幕适配技巧

    一.没有包装任何 导航控制器 或者 UITabBarController 1.控制器的view是UIScrollView\UITableView\UICollectionView时(控制器是UITab ...

  10. jquery deferred

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html http:// ...