BFC与多栏布局的理解

最新推荐文章于 2024-02-09 11:34:15 发布

是这汁阿泽

最新推荐文章于 2024-02-09 11:34:15 发布

阅读量181

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_39826344/article/details/104928585

版权

BFC理解：

首先要了解渲染过程文档流的概念。
BFC可以理解为脱离文档流新生成的一个子文档流。

可以将文档流理解成一个盒子，而BFC就是盒子内的盒子，浏览器渲染就是一个一个盒子的布局。

那么如何触发BFC？

触发BFC：

原理：使元素脱离正常文档流（让要触发BFC的浮起来，自己具备一个盒子）
1）float：float就”浮“起来了
2）display：表现为一个格子（盒子）类的；如inline-block等
3）overflow：除visible外的属性；如hidden理解为，有一个边框，超出就不显示了，是一个单独的盒子
4）position：绝对定位，absolute、fixed；理解为浮起来了

可见触发BFC的关键在于脱离文档流，使该元素”浮起来“

这是一条分界线--------------------------

那么如何理解平时的布局呢？

前面说了，布局可以理解成一个一个盒子摆放。
那么我们来理解一下三栏布局

<head>
        <style>
        	body{
                width: 300px;
            }
            #box1{
                height: 100px;
                width: 100px;
                float: left;
                background-color: pink;
            }
            #box2{
                height: 100px;
                width: 100px;
                float: right;
                background-color: red;
            }
            #box3{
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id='box1'>Float左盒子</div>
        <div id='box2'>Float右盒子</div>
        <div id='box3'>Center中间盒子</div>
    </body>

在这里插入图片描述
这里需要提出一个新想法：float的BFC盒子漂浮起来，不会占用原文档流的位置（但实际情况仍是BFC盒子在文档流盒子同一层，可以理解为Float的BFC盒子为0*0大小），类似以下：

可见Center盒子会被覆盖，若改变

#box3{
                overflow: hidden;	//新增的，使其触发BFC
                height: 200px;
                background-color: blue;
            }

那么此时Center盒子也会”浮起来“
在这里插入图片描述
再看如果添加多一个正常盒子：

        <div id="box4">新盒子</div>

在这里插入图片描述
可见新盒子在文档流中是被上面的盒子”排布下来的“，所以印证前一段说的，实际BFC盒子没有物理上的分层而浮起来，只是助于理解。
关于Float的理解强推以下一篇blog：
https://blog.csdn.net/qq_36595013/article/details/81810219