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

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

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

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. Mysql JDBC Url参数说明useUnicode=true&characterEncoding=UTF-8

    MySQL的 JDBC URL 格式 for  Connector/J 如下例: jdbc:mysql://[host][,failoverhost...][:port]/[database] » [ ...

  2. AngularJS测试框架 karma备忘

    AngularJS测试框架karma安装 安装karma $ --save-dev 安装karma组件 $ npm install karma-jasmine karma-chrome-launche ...

  3. Laravel框架——分页

    第一种:查询时实现分页(不能使用groupBy) $users = App\User::paginate(15); or $users = User::where('votes', '>', 1 ...

  4. js将数字转换成大写的人民币表达式

    function changeNumMoneyToChinese(money) { var cnNums = new Array("零", "壹", " ...

  5. C读写配置文件

    在项目开发中,经常需要读取应用配置文件的初始化参数,用于应用在启动前进行一些初始化配置.比如:Eclipse,参数项包含主题.字体大小.颜色.Jdk安装位置.自动提示等.Eclispe配置的文件格式是 ...

  6. 试试Navicat和Axere RP Pro吧

    感觉在作头作起和沟通方面,这些东东真是提高不好效率呢~~~ 由于敏感,只作载图.

  7. php使用domdocument读取xml文件

    使用domdocument读取xml文件需要用到以下几个方法和属性: 方法: 1:读取xml文件:load() 2:获取标签的对象数组:getElementByTagName() 3:对象数组的索引: ...

  8. 3.1日 重温JVM相关信息

    1.JDK.JRE.JVM的关系: JDK是java开发的必备工具箱,JDK其中有一部分是JRE,JRE是JAVA运行环境,JVM则是JRE最核心的部分. 2.JVM的组成: JVM由4大部分组成:C ...

  9. android Process.killProcess 和 System.exit(0) 区别

    1 Process.killProcess  和 System.exit(0) 两个都会 kill 掉当前进程. 你可以打开 DDMS 查看进程号,或 adb shell 进入 shell 然后 ps ...

  10. mind nerverr later(转)

    每个人都有感到失落迷惘的时候.人生用专制又霸道的方式运行着,每当我们心想一切尘埃落定.生活稳固的时候,生活总爱给我们惊喜,粉碎我们短暂的安逸,让我们不得不重新思考—_— “我走对路了吗?” “我能够赚 ...