CSS布局---两栏布局的四种实现方式

在一些后台管理系统中，两栏布局还是比较常见的，当然两栏布局在面试的时候也是非常常见的，具体怎么实现的呢，我总结了几个能够实现的方法，让我们来看看吧：

（一） 通过触发BFC实现

基本上我们看到这种并列排排站的布局，可能第一时间就会想到浮动。左浮动排队。

不过这里其实一个浮动就行了：

具体实现效果如下：
html：

<div class="box">
        <div class="a"></div>
        <div class="b"></div>
</div>

css:

		*{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box{
            height: 100%;
            background-color: #f00;
        }
        .a{
            width: 200px;
            height: 100%;
            background-color: #000;
            float: left;
        }
        .b{
            height: 100%;
            overflow: hidden; 
            backg