结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
实的阅读材料。</p>
</div>
<div id=”content”>
<p>这里是一些文字</P>
<p>再来一大段文字</P>
<p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
料。</p>
</div>
<div id=”footer”><p>没人关注的页脚</P></div>
</div>
</body>
</html>
一共5个div，为了使这些div具有高度和宽度，向其中添加了一些文字。现在还没有任何float属性，所以每个div都占满了整个父元素的宽度，而高度由其中的内容决定。渲染效果如下：
当一个元素具有float属性时，浏览器会怎样做？我想是这样的：
1.渲浏览器探测到这个元素具有float:right属性，
2.根据其内容限制了div的宽度（而不是尽量占满父元素宽度）
3.脱离文档流，并选择这样的位置进行渲染：
1.首先要在文档流没有占领的区域，否则就有可能覆盖已经渲染的文档。
2.其次，也没有其他float元素。
3.最后，渲染之后不会影响文档流。文档流该怎么走还怎么走，但是文档中的内容会自动绕开float元素。
试着将div#sidebar设置float:left属性：
复制代码
#sidebar{
float: right;
}
侧边栏没有浮动到标题栏上，即使标题栏右侧没有文字。这是因为标题栏的渲染在侧边栏之前进行，浏览器渲染完标题栏后已经忘了标题栏右侧有没有内容了，所以不能冒着覆盖原来的内容的风险将侧边栏浮动到标题栏上。接着，文档流该怎么渲染还是怎么渲染，除了其中文字绕开浮动元素，就好像浮动元素不存在一样。
我们希望侧边栏2在页面左侧，侧边栏1在页面右侧。因为侧边栏2中内容很多，所以需要限定宽度。为了美观，同时限定1的宽度，并对侧边栏2赋float属性。
复制代码
#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 180px;
}
