div+css网页布局教程(1)：float属性介绍

2020-4-17 07:53| 发布者: admin| 查看: 479| 评论: 0

大家好，我是毛仔，从今天开始毛仔和大家一起学习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>

那么这个效果用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>