两栏布局学习笔记

不念不忘少年蓝@ 2022-06-05 04:56 260阅读 0赞

# 两栏布局学习笔记 #

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

## 使用margin实现的布局 ##

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

实现后的效果

![两栏布局01][01]

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

## 使用flex布局 ##

![两栏布局02][02]

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

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结合浮动布局 ##

![两栏布局04][04]

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

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

![两栏布局05][05]

怎么看起来一样？其实不是的，如果右侧的元素不是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的相关知识，收获良多。如果错误，欢迎指点讨论。

[01]: /images/20220605/290001cd62f04ed2b3965617e17927e0.png
[02]: /images/20220605/36d97820176f41c59f43b109e5fabdda.png
[04]: /images/20220605/3e46d53a72ee447b9f8e34a88ec3a523.png
[05]: /images/20220605/2ffa8eac200d4c4cb825661c9e963415.png