Css+Div布局学习（一）?Div布局基础_html/css_WEB-ITnose

上一个系列（css基础学习?索引）我们介绍了css的基础属性和使用，我们从现在开始讲解css+div布局的一些内容。大家准备好，我们要开始布局之旅了。如果你对css还不是很熟悉的话，可以去看看我前面的几篇文章。

如果我们要进行Css的布局，那float（浮动）就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性，如果不采用浮动，元素将一个接一个地往下排列。float属性有三个值：left、right和none，后面我们就会使用这些值的。我们将使用事例来说明布局的特性。

我们做一个html文件，为后面的讲解准备一下：

这样的html使用浏览器打开一定是就几个字符把，我们先加一些简单的Css来标记，这样可以更加清楚地看到页面的布局。

body {   padding:10px;   margin:10px; } div { border:1px solid #000; background-color:#CCC; height:20px; padding:10px; text-align:Center; } #Masthead { margin-bottom:10px; background-color:#CCCCCC; } #Sidebar_a { margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; background-color:#ff3366; } #Footer { background-color:#ffff00; }

我们给每一个Div加上了一个边框，并给每一个Div使用上背景颜色，方便标志。

立即学习“前端免费学习笔记（深入）”；

奇布塔

基于AI生成技术的一站式有声绘本创作平台

41

查看详情

Masthead

Sidebar_a

Sidebar_b

Content

Footer

上面5个Div，分别代表了网页模板里面最常见的表头、表尾、两个边栏和中间的内容。现在还没有添加更多的Css，所以还只是5个从上到下的Div而已。我们先分析一下，首先表头Masthead和表尾Footer两部分已经基本符合要求了，不会需要做更多的改变，那就是中间的两个边栏Sidebar和内容Content需要从左往右排列，我们先看看完成的Css和布局的样子：

Masthead

Sidebar_a

Sidebar_b

Content

Footer

#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; width:25%; margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { float:right; width:25%; margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; height:150px; background-color:#ff3366; } #Footer { clear:both; background-color:#ffff00; }

首先说明一下，所有的html没有作任何修改，只是添加了一些Css。
比较前面和后面的Css，Masthead和Content里面的内容没有什么改变，Content里面的height:150px;只是为了说明内容较多情况下会是怎么样的情况。关键就是Sidebar_a内的float:left;和Sidebar_b内的float:right;。正是这两个属性使我们的布局顺利完成了。大家还可以自己尝试一下，把Sidebar_a和Sidebar_b内的属性换一下，两个边栏的位置就对换了，这个正体现了Div+Css布局的灵活性。

Masthead

Sidebar_a

Sidebar_b

Content

Footer

我们别忘记了在表尾Footer内有clear:both;属性，这个属性又是做什么的呢？浮动使用了以后会对后面的元素造成影响，所以要清理掉。
注意：上面的Html里面的五个Div不能顺便的变换位置，不然就不能正常地显示。特别是Content要在两个边栏的后面。
上面只是简单地说明了Div的布局，大家要熟练使用还是自己多多练习了。