CSS中使用浮动用法

代码如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
    #header{background-color: gray;}
    #content{background-color: red;overflow: auto;}
    #sidebar{background-color: blue; float: right;}
    #sidebar2{background-color: green;float: left; width: 100px;}
    #footer{background-color: yellow;clear: both;}
</style>
</head>
<body>
<div id="page">
    <div id="header"><h1>这里是标题</h1></div>
    <div class="box">
    <div id="sidebar">
        <p>侧边栏</p>
    </div>
    <div id="sidebar2">
        <p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
        标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
        结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
        实的阅读材料。</p>
    </div>
    <div id="content">
        <p>这里是一些文字</P>
        <p>再来一大段文字</P>
        <p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
        因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
        之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
        料。</p>
    </div>            
    </div>

    <div id="footer"><p>没人关注的页脚</P></div>
</div>
</body>
</html>

这是一个使用浮动实现三列布局的效果，虽然简单，却很实用

浮动实现三列布局.png

学习笔记来自于这篇文章