使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博文，就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局。
DIV的特点
布局的基本HTML元素div，有这么几个特点，会影响到后面进行的布局。注意，下面的特点仅适用于没有指定width属性和height属性的div，因为在用float进行布局的过程中，我们只有在特定的位置（后面会详述）才这么做。
•空的div是没有高度的。
•有内容的div其高度取决于内容的高度。
•如果没有指定float属性，div的宽度将和占满父元素的宽度（不管是不是空的）。
•如果指定了float属性，div的宽度将取决于内部元素的宽度（所以，空的div指定了float属性后既没有高度也没有宽度）。
网上的很多教程，经常指定了div的宽度或高度，然后讲解float属性，这对我学习布局确实产生了很大干扰。记住，只有在特定的位置，我们才会指定div的宽度。
Float布局的过程
在实践过程中，我领悟到一点，那就是，div是按照在HTML文档中的顺序进行渲染的。也就是说，我们先决定前一个div在页面上的位置，然后再决定后一个div的位置。也许这一点是显而易见的，但它确实是理解Float布局的关键，网上其他教程里很少有提及。
有下面这样的HTML文档
复制代码代码如下:
<!DOCTYPE>
<html>
<head>
<style type=”text/css”>
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id=”page”>
<div id=”header”><h1>这里是标题</h1></div>
<div id=”sidebar”>
<p>侧边栏</p>
</div>
<div id=”sidebar2″>
<p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
新闻热点
疑难解答
