两栏布局学习笔记

两栏布局学习笔记

看到这个问题，第一想法就是使用margin来实现。当然了，使用margin是可以很容易实现的，那么还有没有别的方法呢？市面上那么多的布局方式，肯定是有的。结合我最近的学习，又想到了使用flex来进行布局，一试，诶果然可以。当然不能就此满足了，又去查了一下还有什么布局方式。果然还有一种有趣的布局方式吸引了我，那就是通过BFC和浮动实现的布局。

使用margin实现的布局

这个方法是最简单、最容易想到的。基本思想的话就是，一个固定宽度的元素在左侧，然后右侧使用margin和左侧隔出一定的距离就可以实现了。但是问题来了，在标准文档流中，每一个块级标签都是占一行的，那么应该如何将他们放到一行去呢？很显然，脱离文档流就好了，所以我们的基本思路就是把左侧的元素脱离文档流，右侧元素使用margin隔出距离。

实现后的效果

        .left {  
            float: left;//这里使用position：absolute也可以实现一样的效果，原理也相同
            width: 200px;
            height: 300px;
            background-color: #cc0;
        }
        .main {
            margin-left: 210px;
            height: 300px;
            background-color: #0cc;
        }

使用flex布局

额，其实实现后的效果都一样，不过为了方便阅读还是把图放上去。

        body {
            display: flex;
            background-color: #ccc
        }
        .left {  
            width: 200px;
            height: 300px;
            background-color: #cc0;
        }
        .main {
            flex: 1;//或者flex-grow
            margin-left: 10px;
            height: 300px;
            background-color: #0cc;
        }

使用flex的话肯定要先改变外部容器的布局方式为flex，然后左侧的元素宽度是固定的，右侧元素的话使用flex或者flex-grow让元素变为自动填充满剩余的部分就可以实现了。使用flex布局果然简单，原理也是相当的好懂了。

使用BFC结合浮动布局

这个解释起来就比前两个复杂多了。这里为了方便解释没有在两栏之间加上间距。

我们先来看一下如果右侧栏不是BFC会怎么样

怎么看起来一样？其实不是的，如果右侧的元素不是BFC，那么左侧元素会因为浮动而盖在右侧元素之上。

那么为什么将右侧元素变为BFC就可以了呢。这是因为每个BFC都是一个独立的区域，他不会让这个BFC外部的元素对他内部造成干扰。所以当右侧元素变化为一个BFC的时候他的元素边界就发生了变化，他的边界紧紧贴合着左侧的元素。所以我们不需要使用margin就可以把右侧的元素放在右边，而不是和左侧元素重叠。

        .left {  
            float: left;
            width: 200px;
            height: 300px;
            background-color: #cc0;
        }
        .main {
            height: 300px;
            background-color: #0cc;
        }

但是这样写也造成了一些小的问题。在这个实例中我是没有让两栏之间有间距的。这是因为虽然右侧栏独立出来了，在BFC中内容区域的左侧边框是紧紧贴合着盒模型的边框的，所以我们简单的使用margin就是不可取的了。因为只有当margin的值超过了左侧栏的宽度，才会触及到更外一层的边框从而推动右侧栏向右移动。

总结

两栏布局，似乎挺简单的，但是其中还有着很多有趣的东西。也是顺便又学习了一波BFC的相关知识，收获良多。如果错误，欢迎指点讨论。