浮动布局的方法（总结）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bingkingboy/article/details/51035652

      HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例）

微博排版

先上图片：

      盒子中包含左右两个子盒子（用黑边框将其分开），就以这种左右两栏为布局的模型，来总结浮动布局的方法。

浮动布局HTML排版

    <div class="container">
        <div class="wrap clearfix">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </div>

方法一：固定布局

    <style>
        .container{width: 600px; background-color: #DDF3F7;}
        .wrap{padding: 20px;overflow: hidden;}
        .box1{float: left;width: 56px;background-color: #ccc;height: 300px;}
        /* 固定布局写法 */
        .box2{float: right;width: 484px;background-color: #ccc;height: 300px;}
        /*清除浮动造成的影响*/
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1;}
    </style>

方法二：流体布局

    <style>
        .container{width: 600px; background-color: #DDF3F7;}
        .wrap{padding: 20px;overflow: hidden;}
        .box1{float: left;width: 56px;background-color: #ccc;height: 300px;}
        /* 流体布局写法 */
        .box2{margin-left: 76px;background-color: #ccc;height: 300px;}
        /*清除浮动造成的影响*/
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1;}
    </style>

方法三：浮动与两侧皆自适应的流体布局

    <style>
        .container{width: 600px; background-color: #DDF3F7;}
        .wrap{padding: 20px;overflow: hidden;}
        /* 浮动与两侧皆自适应的流体布局写法*/
        .box1{float: left;margin-right:20px;background-color: #ccc;height: 300px;}
        .box2{display: table-cell; *display: inline-block; width: auto;}
        /*清除浮动造成的影响*/
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1;}
    </style>

      注意采用这种方法，HTML文档中box1和box2中必须有内容

方法四：右浮动，改变DOM位置的流体布局

    <style>
        .container{width: 600px; background-color: #DDF3F7;}
        .wrap{padding: 20px;overflow: hidden;}
        /* 浮动与两侧皆自适应的流体布局写法*/
        .box1{width: 56px; float: right;background-color: #ccc;height: 300px;}
        .box2{margin-right: 76px;background-color: #ccc;height: 300px;}
        /*清除浮动造成的影响*/
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1;}
    </style>

方法五：左浮动，不改变DOM位置的流体布局写法

    <style>
        .container{width: 600px; background-color: #DDF3F7;}
        .wrap{padding: 20px;overflow: hidden;}
        /* 浮动与两侧皆自适应的流体布局写法*/
        .box1{width: 100%; float: left;background-color: #ccc;height: 300px;}
        .box2{width: 56px; float: left; margin-left: -56px;background-color: #000;height: 300px;}
        /*清除浮动造成的影响*/
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1;}
    </style>

总结

      这几种方法以“浮动与两侧皆自适应的流体布局”为最佳，因为它自适应强，可以不需要设置左右盒子的宽度，根据盒子内容来确定它们的排版。微博中采用这种方式可以实现盒子中个人头像大小替换，替换的同时并不会破坏网页的排版。