CSS布局：Float布局过程与老生常谈的三栏布局

原文见博客主站，欢迎大家去评论。

使用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：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
            标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
            结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
            实的阅读材料。</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;
    }

 

有点像一个三栏布局的样子了。但我们通常不希望中栏高于侧边栏时，延伸到侧边栏下方。这时通常使用的技巧就是给中栏带margin属性，左右的值就是两个侧边栏的值。

    #sidebar{
        float: right;
        width: 100px;
    }
    #sidebar2{
        float: left;
        width: 160px;
    }
    #content{
        margin-left: 160px;
        margin-right: 100px;
    }

很好，一个三栏布局就完成了。虽然看上去很好，但是如果中栏的高度小于侧边栏会怎样？把中栏里的内容都删掉大部分，然后：

见鬼，页脚上去了……这可不是我希望的。那么还有一个技巧，就是在页脚使用clear属性。这个属性的作用就是，使文档流中元素在布局的时候，不允许左侧或右侧出现浮动元素。如果有，则在浮动元素的下方进行渲染。这里，为页脚添加clear属性。

    #sidebar{
        float: right;
        width: 100px;
    }
    #sidebar2{
        float: left;
        width: 160px;
    }
    #content{
        margin-left: 160px;
        margin-right: 100px;
    }
    #footer{
        clear: both;
    }

页脚也正常了，这样，一个三栏布局就最终完成了。

最后，再来看一个例子吧，这个例子将解释两个问题：

  1. 当可渲染区域去除掉已有的浮动元素，剩下的那一块区域，其顶部不足以容纳浮动元素时，浮动元素将放弃渲染在顶部，而渲染在前面那个浮动元素的下方。
  2. 在以上的情况下，两个浮动元素仍然不在文档流中，可能会产生一些诡异的现象。

恢复中栏的内容，并改写CSS代码如下：

    #sidebar{
        float: right;
        width: 200px;
    }
    #sidebar2{
        float: left;
        width: 300px;
    }

这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。

posted @ 2013-07-22 08:57  一叶斋主人  阅读(8150)  评论(5)  编辑  收藏  举报