BFC 相关概念，及解决开发中遇到的问题

轻叹呀

于 2023-03-07 11:17:59 发布

阅读量119

点赞数 1

分类专栏： js实例文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_66566196/article/details/129377503

版权

js实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、FC（fomatting context）:格式上下文对象。css2.1提供的一种规范，规定了一个区域，在这个区域中所有元素都有自己的排列规则。块元素在这个区域有一个规则，行元素在这个区域也有一个规则。

二、BFC（block fomatting context）:块元素格式上下文。通常把这个盒子说成“BFC盒子”。

三、哪些属性可以触发BFC

1、overflow: hidden;

2、float:!none;

3、position:fixed/absolute

四、解决开发中的哪些问题：

三列布局：左右两边固定，中间自适应，更多会用在移动端开发

结构层代码：
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
    <!-- 中间盒子需要放在最后-->
</body>
样式层代码：
.left{
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: right;
        }
        .center{
            width: auto;/*宽度让其自适应，由于还未设置bfc，此时会占满整个屏幕，左右两边会被覆盖*/
            height: 150px;
            background-color: green;
        }

设置bfc之前的效果

给center设置成bfc盒子

样式层代码：
.left{
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: right;
        }
        .center{
            width: auto;/*宽度让其自适应，设置成bfc盒子以后，左右两边不被覆盖*/
            height: 150px;
            background-color: green;
            overflow:hidden;/*此时将center变成bfc盒子*/
        }

设置bfc的效果

2、父盒子高度塌陷的问题：父盒子高度由内容撑开，子盒子产生浮动，脱离标准文档流，高度不进入计算，导致父盒子高度塌陷。此时将父盒子变成bfc，就可解决以上问题。

结构层代码：
<body>
    <div class="wrapper clearfix"><!-- 给父盒子添加一个用于清除浮动的类名clearfix -->
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
    </div>
</body>

样式层代码：
    <style>
        .wrapper {
            width: 300px;
            height: auto;
            /* 让父盒子高度由内容来撑开只需height:auto,或者将高度属性直接去掉 */
            border: 5px red solid;
            overflow:hidden;/*将父盒子变成bfc*/
        }

        .box {
            width: 100px;
            height: 100px;
            float: left;
        }

        .box1 {
            background-color: green;
        }

        .box2 {
            background-color: yellow;
        }
        
    </style>

此时父盒子高度被撑开

3、margin-top的传递性问题：当给子盒子设置margin-top时，会传递给父盒子，让父盒子往下走。

结构层代码：
<div class="fbox">
        <div class="zbox"></div>
</div>
样式层代码：
.fbox{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .zbox{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 50px;/*本意是想让子盒子向下移动50px,结果父盒子向下移动了*/
        }

把父盒子变成bfc，消除这种影响。

.fbox{
            width: 200px;
            height: 200px;
            background-color: aqua;
            overflow: hidden;/* 将父盒子变成bfc */
        }
        .zbox{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 50px;
        }