网页布局笔记2—基于浮动的布局

顾名思义，在基于浮动的布局中，只需设置希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是，不对元素进行连续地浮动和清理，而是浮动几乎所有东西，然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。

1．  两列的浮动布局

在下面的示例中，(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器 div 中，这个 div 使用前面介绍的方法之一进行水平居中:

　　　　　　<div id="wrapper">

                            <div id="branding">

                                     ...

                            </div>

                            <div id="content">

                                     ...

                            </div>

                            <div id="mainNav">

                                     ...

                            </div>

                            <div id="footer">

                                     ...

                            </div>

        　　 </div>

实现这个布局的 CSS 非常简单。只需为每个列设置想要的宽度，然后将导航向左浮动，将内容向右浮动:

#content {

                   width: 520px;

                   float: right;

}

#mainNav {

                   width: 180px;

                   float: left;

}

#footer {

                   clear: both;

}

为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚。

 

2. 三列的浮动布局

创建三列布局所需的 HTML 与两列布局的 HTMLL 非常相似，唯一的差异是在内容 div 中添加了两个新的div: 一个用于主内容，另一个用于次要内容。

　　　　　　<div id="content">

                            <div id="mainContent">

                                     mainContent

                            </div>

                            <div id="secondaryContent">

                                      secondaryContent

                            </div>      

                  </div>

只需设置想要的宽度，然后将主内容向左浮动，将次要内容向右浮动:

　　　　　　#mainContent {

                            width: 320px;

                            float: left;

      　　　　}

        　　   #secondaryContent {

                            width: 180px;

                            float: right;

       　　　 }