前端面试题——10.谈谈你对BFC的理解

最新推荐文章于 2024-04-24 11:25:22 发布

浅端

最新推荐文章于 2024-04-24 11:25:22 发布

阅读量833

点赞数 1

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

本文链接：https://blog.csdn.net/qq_40686529/article/details/102547202

版权

前端面试题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

BFC是什么？个人理解，BFC就相当于，你和林志玲——毫无关系。两个人的世界，她过她的生活，你处在你的世界，不会相互影响。我知道你还不懂，所以
在这里插入图片描述
栗子1：

<head>
<style>
body{
    width: 300px;
    position: relative;
}
.inside1{
    height: 100px;
    width: 100px;
    background: #ff0;
    float: left;
}
.inside2{
    height: 200px;
    background: #ccc;
    overflow: hidden;
}
</style>
</head>>
<body>
    <div class="inside1"></div>
    <div class="inside2"></div>
</body>

运行结果：

分析：每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。因此inside2的左边就会与body的左边相接触。
解决办法：

BFC的区域不会与float box重叠。

利用BFC，使inside2成为一个BFC区域，就不会再与float的inside1区域重叠

.inside2{
    height: 200px;
    background: #ccc;
    overflow: hidden;
}

修改结果：
在这里插入图片描述

栗子2：
需求：大盒子里套两个一模一样的小盒子

<head>
<style>
.outside{
    width: 300px;
    position: relative;
    border: 3px solid #000;
}
.inside{
    height: 100px;
    width: 100px;
    background: #ff0;
    float: left;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside"></div>
    <div class="inside"></div>
</div>
</body>

运行结果：
在这里插入图片描述
分析：大盒子没设置高度，而小盒子float，脱离文档流，无法撑开大盒子的高度，导致大盒子的高度只有自身的边框高（border=3*2）

BFC高度包括内部浮动元素的高度

所以只要触发外部大盒子成为一个BFC，那么内部的小盒子就能撑起大盒子
修改：

outside{
    width: 300px;
    position: relative;
    border: 3px solid #000;
    overflow: hidden;
}

在这里插入图片描述

栗子3 ：
防止margin重叠。
现象描述：同一个BFC里的margin会重叠，如下DOM盒子里的220，上下两个盒子margin应该为20*2=40px，可是两个盒子属于同一个BFC内，所以margin重合。

在这里插入图片描述

<head>
<style>
.outside{
    width: 300px;
    position: relative;
}
.inside{
    height: 100px;
    width: 100px;
    background: #ff0;
    margin:20px;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside"></div>
    <div class="inside"></div>
</div>
</body>

解决办法：
在第二个盒子外包括一个BFC

.wrap{
    overflow:hidden;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside"></div>
    <div class="wrap">
        <div class="inside"></div>
    </div>
</div>

在这里插入图片描述

参考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

浅端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题——10.谈谈你对BFC的理解

BFC是什么？个人理解，BFC就相当于，你和林志玲——毫无关系。两个人的世界，她过她的生活，你处在你的世界，不会相互影响。我知道你还不懂，所以栗子1：<head><style>body{ width: 300px; position: relative;}.inside1{ height: 100px; width: 100px...
复制链接

扫一扫