面试积累——BFC

最新推荐文章于 2025-04-10 09:40:36 发布

daisy_Hawen

最新推荐文章于 2025-04-10 09:40:36 发布

阅读量1.6k

点赞数

分类专栏： css 面试文章标签：面试前端面试

本文链接：https://blog.youkuaiyun.com/sinat_25127047/article/details/70145660

版权

css 同时被 2 个专栏收录

14 篇文章

订阅专栏

面试

8 篇文章

订阅专栏

什么是BFC

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

BFC有一下特性：

内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。

如何触发BFC

那么我们该怎么使用BFC呢，如何触发BFC呢？：

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素
绝对定位元素(position:absolute 或fixed)
行内块inline-block(元素的display:inline-block)
表格单元格(元素的display:table-ceil,HTML表格默认属性)
弹性盒flex boxes(元素地display:flex或inline-flex)

在以上的情况里可以创建BFC。

哪些场景可以使用BFC

1.解决margin叠加问题

<head>
    <title></title>
    <style type="text/css">
        p{
            margin: 50px;
        }
    </style>
</head>

<body>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</body>

这里写图片描述
三P每个p之间的距离为50px，发生了外边距叠加。要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。如下:

    <style type="text/css">
    p {
        margin: 50px;
    }
    .bfc{
        /*position: absolute;*/
        overflow: auto;
    }
    </style>
</head>

<body>
    <div class="bfc">
        <p>hello world</p>
    </div>
    <p>hello world</p>
    <p>hello world</p>
</body>

第一个盒子就和第二个盒子的边距为100px

这里写图片描述

不过虽然变成bfc，但是不同的方式也有所不同

.bfc{
        position: absolute;

}

这里写图片描述

2.用于布局

    <style type="text/css">
        body{
            width: 300px;
            position: relative;
        }
        .aside{
            width: 100px;
            height: 150px;
            float:left;
            background: blue;
        }
        .main{
            height: 200px;
            background: #f00;
        }
    </style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>

这里就会出现这种情况
这里写图片描述
从图中我们会发现上面BFC的第三个特性，就是元素的左外边距会触碰到包含块容器的做外边框，就算存在浮动也会如此。（这里不太理解）
看上面BFC第四个特性，就是BFC不会与浮动盒子叠加，那么我们是不是可以创建一个新的BFC来解决这个问题呢？来看看：

 .main {
        height: 200px;
                background: #f00;
                overflow:hidden;
}

就解决了上面的问题。发现我们用overflow:hidden触发main元素的BFC之后，效果立马出现了,

3.用于清除浮动，计算BFC高度.

因为上面第六个特性提到计算BFC高度时，浮动元素也会参与计算，我们先看一个例子：

<head>
    <title></title>
    <style type="text/css">
        .bfc{
            border: 5px solid #f00;
            width: 300px;
        }
        .box{
            border: 5px solid blue;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="bfc">
    <div class="box"></div>
    <div class="box"></div> 
</div>
</body>
</html>

其实我一看这个代码，我就知道会出现bfc撑不起来的问题，因为box设置了float，其实就相当于脱离了流，如果理解正常情况下一个html其实就是一层平地，我们往这里面塞盒子。
先把float注释掉来看效果：

/*float: left;*/

bfc没有设置高度，它的高度是因装的东西而定的，如果就是浏览器默认的static，那么box和bfc在一个平面，就相当于我们往地上扔了一个纸箱子，这个箱子的高度是可以伸缩的。我们再往里面扔两个盒子，这个箱子就扩充起来了。
这里写图片描述

float: left;

一旦有了这句话就不一样了，这个时候两个盒子被放在了二楼，这个bfc箱子还在一楼，自然就是瘪的了
这里写图片描述
要如何将这个bfc也放到二楼呢？
那就需要将它变为bfc:就是上面提到的方式

overflow: hidden;
float: left;
position: absolute;
display: flex;

都可以实现，因为这样它就变成了BFC和box并列了，都放到二楼去了。