浅谈BFC的理解

最新推荐文章于 2024-10-06 15:01:40 发布

Jacky爱吃奶酪

最新推荐文章于 2024-10-06 15:01:40 发布

阅读量70

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52384235/article/details/128447552

版权

浅谈面试中的BFC

官方的解释

W3C官方的解释是：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

FC

FC的含义是“格式化上下文”，任何一个元素在标准流里都属于一个FC。它可能属于BFC，也可能属于IFC，但是不能同时属于两种FC。块级元素参与BFC，而行内元素参与IFC。每一个块级元素都参与BFC，重点是搞清楚不同的块元素之间是否属于同一个BFC。

什么是BFC

BFC“块级元素上下文”，可以理解为块级元素布局的环境，在这个环境中，能解释我们网页中很多理所应当的事情。
1.在我们标准流当中，我们的块元素独占一行，第一个块元素不会与第二个块元素布局在同一行。
2.块元素的布局都是从顶部开始的。
3.块元素总是从它的所在行的左边开始渲染，而不是右边。
4.块元素之间的距离通过margin来进行设置。
5.相邻的块元素之间的margin会折叠。

以上这些都是BFC环境的一些特点，他会对里面的这些布局起到如上的作用。

形成BFC的常见条件

1.float不是none
2.position是absolute或fixed
3.overflow不是visible
4.display:flex、inine-block
5.html元素

BFC解决了什么问题

解决margin折叠的问题（注意每个盒子所在布局的BFC)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            background-color: orange;
        }

        .box1{
            width:400px;
            height:300px;
            background-color: aqua;
            margin-bottom:50px;
        }

        .box2{
            margin-top: 30px;
            height:50px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
   </div>
</body>
</html>

运行的效果截图：
在这里插入图片描述
我们可以看点第一个盒子与第二个盒子之间的间距为50px。那是因为它们都属于同一个BFC（html)根元素所在的BFC.
当我把代码改成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            background-color: orange;
        }

        .container{
            overflow: auto;
        }

        .box1{
            width:400px;
            height:300px;
            background-color: aqua;
            margin-bottom:50px;
        }

        .box2{
            margin-top: 30px;
            height:50px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div class="wrapper">
    <div class="container">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
   </div>
</body>
</html>

在这里插入图片描述
这时，它们的margin就不会进行叠加。因为浅蓝盒子的BFC属于container出发的。深蓝盒子的BFC属于html元素出发的。

解决浮动高度塌陷的问题

当我对元素进行浮动时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            background-color: orange;
        }

        .box1{
            float:left;
            width:400px;
            height:300px;
            background-color: aqua;
        }

        .box2{
            float:left;
            width:500px;
            height:300px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
   </div>
</body>
</html>

在这里插入图片描述
如果我不设置父元素的高度，则父元素的高度会塌陷。但是，如果我设置父元素的BFC，则父元素的高度就不会塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            background-color: orange;
            overflow:auto;
        }

        .box1{
            float:left;
            width:400px;
            height:300px;
            background-color: aqua;
        }

        .box2{
            float:left;
            width:500px;
            height:300px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
   </div>
</body>
</html>

在这里插入图片描述
这是因为BFC区域的高度在auto的情况下，是使用如下的方法来计算高度的。
1、如果只有inline-level,是行高的顶部和底部的距离
2、如果只有block-level,是由底层的块上边缘和最底层块盒子的下边缘之间的距离。
3、如果是绝对定位元素，则会被忽略。因此，不能解决绝对定位带来的高度塌陷的问题。
4、如果由浮动的元素，则会增加高度以包括这些浮动元素的下边缘。