欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【div+css网页布局教程(1)：float属性介绍】，下面是详细的分享！
div+css网页布局教程(1)：float属性介绍
大家好，我是毛仔，从今天开始毛仔和大家一起学习div+css页面布局。从2008年7月份开始，毛仔辞去了原来的工作，和ofseo老兄一起“网络创业”。在那半年时间里学习了不少东西，包括div+css网页设计，seo相关知识，单页面做google adsense，玩熟了dedecms等各大cms和论坛系统……
通过几个月的学习和摸索，毛仔也是有很多心得，也通过做单页面赚了一点点上网费，本来很想把自己的学习心得也想给网络菜鸟们分享分享，使得和我一样的网络菜鸟们能早点掌握一些搞网络的基本技术，使大家的站都能快速发展起来。但是毛仔太懒，不喜欢写东西，前段时间也忙，所以虽然有这份心思，但一直没有动手，这段时间毛仔在找工作阶段，所以闲余时间比较多，就想写点东西和大家一起分享分享。其实，还有个原因，大家可能不相信，毛仔摸电脑摸了这么长时间了，做网站也起码有100个了，但是打字速度超级慢，至今还不会盲打，更不会五笔这种高深的打字法，所以写东西对我来说是一个浩大的工程。
好了，闲话先不说了，先开始我们的div+css教程。
关于这个教程，我主要是讲div+css页面布局，所以最基本的html和css基本知识我就不多讲了，如果一点都不会的话可以自己去看看基本教程。
怎么样用div+css来实现页面布局：
把div看成一个容器，网页上的内容就包含在一个个的容器里面，我们可以像使用表格(table)一样来使用div，能够像table套table一样来套div。对于熟悉使用table来布局的朋友，学习初期可以按照使用table的思路来使用div。
对于div的横向排列各位朋友很容易理解，这里要说的div的竖向排列问题。
先来看看一个例子：
有个页面左右两栏，如果用传统的table结构来布局代码如下：
<head>
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>容器一</td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">容器二</td>
<td width="50%">容器三</td>
</tr>
</table>
</body>
</html>
那么这个效果用div+css怎么实现那，我们来看看代码：
<head>
<title>无标题文档</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}
</style>
<body>
<div class="div1">容器一</div>
<div class="div2">容器二</div>
<div class="div3">容器三</div>
</body>
</html>
大家看看简单吧!这里用到了一个div+css里面最重要的一个css属性float.
语法：
float : none | left | right
取值：
none :? 默认值。对象不飘浮
left :? 文本流向对象的右边
right :? 文本流向对象的左边
说明：
该属性的值指出了对象是否及如何浮动。
跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
示例：
div { clear : left }
img { float: right }
所以我们要设置两个并列的容器，只需要给这两个容器设置float属性就可以，左边的容器设置float:left，右边的容器设置float:rigeht。特别需要的注意的是两个并列容器的总宽度不能超过父容器，否则可能显示的不是并列的，而是有一个容器会显示到某一个的下方去。
说到这里有朋友会问，两个容器可以这样排列，那么三个或更多并列容器怎么样排列?因为float属性只有三个值float : none | left | right ，也就是只能向左边或右边浮动，所以要设置多个并列容器完全可以借鉴套table一样的思路。我们可以先设置两个并列的大容器，然后再在个个大容器里面再套两个并列小容器，以此类推，只要你想要，可以设置n个并列的容器。
我们来看下面的例子：
简略代码如下：
<head>
<title>无标题文档</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}
.div4{ float:left; width:50%}
.div5{ float:right; width:50%}
</style>
<body> <div class="div1">容器一</div>
<div class="div2">
<div class="div4">容器四</div>
<div class="div5">容器五</div>
</div>
<div class="div3">容器三</div>
</body>
</html>
大家可以看到用div和table的思路有很多相似之处，但是代码却简洁的多，并且实际中页面加载速度比table结构要快的多。
好，第一讲就到这里，请继续关注下一讲。
作者：毛仔
来源：http://www.dianpu818.com/maozai/post/3.html
原创文章，
以上所分享的是关于div+css网页布局教程(1)：float属性介绍，下面是编辑为你推荐的有价值的用户互动：
相关问题：CSS中div的float各个属性具体有什么作用？
答：定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则... >>详细
相关问题：CSS+div布局中float:left具体解释？
答：希望我的回答对你有帮助，用我的经验并且结合当初学习的教程： 看到你的问题首先针对的问题是float浮动问题，你得显示问题和position没有一丁点关系，因此ab显示和abc显示的问题就是简单的float设置问题，因此你所说的问题有没有设置position效... >>详细
相关问题：!急!DIV+CSS关于float属性的深入探讨!
答：因为没有清除浮动。 css加上 .clearboth{clear:both; border:0px; padding:0px; margin:0px;} 在需要清除的位置加上： >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-