BFC(2)——我已经把上次的忘了。。

关注

原创最新推荐文章于 2026-02-06 11:05:23 发布 383 阅读 AI 写同款· GEO 优化 ›

今天早上　在梦中被舍友叫醒起来答题。
《去哪儿？？？？》！！！！！！！！
我起来晚了，在梦中就听见舍友说：天哪！！！３个全是编程题！！！我赶紧起床，都开始了！！！
我打开一看是１简答２编程，还好吧。然后。。。。
眼睛也睁不开就开始了答题。
简答题
第一个就是ＢＦＣ是什么？然后让写一个左定位，右平铺的布局。
BFC：块级格式化上下文，是用于布局块级盒子的一块渲染域。
触发条件：
（1）position：absolute或fixed
（2）float：不为none
（3）overflow：不为visible
（4）display：为inline-block、table-cell、table-caption
（5）根元素，即HTML元素
作用：
（1）可以阻止元素被浮动元素覆盖
（2）可以包含浮动元素解决塌陷问题。
（3）同属于一个BFC的相邻两个块级元素的上下margin会发生重叠。
我的测试：
啥都没有的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div1{
            background: red;
        }
        .div11{
            background: green;
        }
        .div12{
            background: blue;
        }
    </style>
</head>
<body>
    <div class="div1">外面的盒子
        <div class="div11">里面的盒子1</div>
        <div class="div12">里面的盒子2</div>
    </div>
</body>
</html>

效果图

OK现在开始一点一点加。
给div1加float:left;高度变为字高+div2高。
若div1,div2都float 脱离文档流，则，div塌陷。

div{
            opacity: 0.8;
        }
        .div1{
            background: red;
            width:250px;


        }
        .div11{
            background: green;
            width: 100px;
            height: 100px;
            overflow: hidden;
            word-break: break-all;
            float: left;
        }
        .div12{
            background: blue;
            width: 100px;
            height: 100px;
            float: left;
        }

塌了。。
解决这个问题：

.div1{
            background: red;
            width:250px;
            position: absolute;
        }

2、margin共用
共用了：`div{
opacity: 0.8;
}
.div1{
background: red;
width:250px;
height: 300px;

    }
    .div11{
        margin: 20px;
        background: green;
        width: 100px;
        height: 100px;
        overflow: hidden;
        word-break: break-all;

    }

    .div12{
        background: blue;
        width: 100px;
        height: 100px;
        margin: 20px;


    }`

解决这个问题：

.div12{
            background: blue;
            width: 100px;
            height: 100px;
            margin: 20px;
            position: absolute;


        }

ok了。

恕我直言，那个解决覆盖的问题，没研究出来。

额。。是这样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            opacity: 0.8;
        }
        .div1{
            background: red;
            width:250px;
            overflow: hidden;
        }
        .div11{

            background: green;
            width: 100px;
            height: 100px;
            float: left;            
        }
        p{
            background: yellow;
            overflow: hidden;
        }   
        .div12{
            background: blue;
            width: 100px;
            height: 100px;
            float: left;



        }

    </style>
</head>
<body>
    <div class="div1">外面的盒子
        <div class="div11">里面的盒子1</div>
        <p>风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗</p>
        <!-- <div class="div12">里面的盒子2</div> -->
    </div>
</body>
</html>

说一下，为什么形成BFC就可以干这么多事了？
因为其他元素脱离了文档流，所以要给他形成自己的BFC中。

还有大家都喜欢的“夹心饼干”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            opacity: 0.4;
        }
        .div1{
            background: red;
            width:250px;
            overflow: hidden;
        }
        .div11{

            background: green;
            width: 100px;
            height: 100px;
            float: left;            
        }
        .div12{

            background: green;
            width: 100px;
            height: 100px;
            float: right;           
        }
        p{
            background: yellow;
            overflow: hidden;

        }   


    </style>
</head>
<body>

        <div class="div11">里面的盒子1</div><div class="div12">里面的盒子2</div>
        <p>风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗</p>


</body>
</html>