两栏布局学习笔记

最新推荐文章于 2024-09-30 08:45:00 发布

ZacheryWu

最新推荐文章于 2024-09-30 08:45:00 发布

阅读量837

点赞数

分类专栏： css学习文章标签：布局

本文链接：https://blog.csdn.net/w157z0372x5580/article/details/78565537

版权

css学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

两栏布局学习笔记

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

使用margin实现的布局

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

实现后的效果

两栏布局01

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

使用flex布局

两栏布局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

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

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

两栏布局05

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

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

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