CSS常见网页布局

 

 这个网页布局主要用到了CSS块级元素浮动和清除浮动，以及类外边距的设置

1.首先将网页分为4个标准流块级元素，分别是：top,banner,box,fotter

即boday部分为：

    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>

2，然后对每一个块级元素添加属性，即行宽高，颜色，内外边距

具体如下：

 ！！！之所以变得这么长，是因为第三个块级元素box父元素未添加高度，那么box高度就会随着子元素变化，而它的子元素又因为是单独的块级元素，每一个独占一行，说一会导致第三个块级元素高度变得非常大，看起来极不协调。

3，这时候就需要将box内子元素浮动起来，使子元素乖乖站好。 

但添加浮动元素之后真的能做到我们想要的结果吗？

让我们来看看： 

 

 结果显然不行！@（--）@

4，清除浮动

由于添加浮动后，子元素浮动，父元素有没有设置高度。那么程序就会自动认为父元素高度为0，下一个块级元素自然就会接着这一个元素。这里我们就需要清除浮动，使子元素固定住，又让下一个块级元素乖乖排在上一个元素后面，而不出现重叠现象。 

清除浮动有四种方式：

方法一：清除浮动之额外标签法
        .clear {
            clear: both;
        }
        <!-- <span class="clear"></span> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <div class="clear"></div>

方法二：清除浮动元素之父元素overflow
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

方法三：清除浮动之伪元素清除
         .clearfix:after {    //这里相当于添加一个后置元素堵住浮动的子元素
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }
~~~~

方法四：清除浮动之双伪元素清除        
        .clearfix:before,.clearfix:after {    //这里相当于添加一个前置块元素堵住
            content: "";
            display: table;
        }

        .clearfix:after {     //这里相当于添加一个后置元素堵住
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

到这里，我们就可以看到一个我们想要的网页布局