了解什么是bfc（前端面试）

最新推荐文章于 2024-05-13 23:07:09 发布
最新推荐文章于 2024-05-13 23:07:09 发布
阅读量500 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75866478/article/details/134147576
版权

当面试官说：请说一下什么是bfc？在css中有什么作用？

你会怎么说？

很多人会告诉你，bfc就是块级格式化上下文，那么这到底是什么意呢?

bfc的全称是Block Format Content，直译为块级格式化上下文，它是一个独立的渲染区域，也就是说，触发bfc的元素会形成一个独立的渲染区域，这个区域里面的元素（包括他自己）不会影响外部元素的渲染，


那么什么情况下，会形成bfc区域呢？

1、设置了float并且值为除none以外

2、设置overflow并且值是除visible以外的值（比如说hidden）

3、类型强制转换：display：inline-block、、table-cell、table-caption；

4、添加定位值为absolute或者fixed

5、有根元素、父元素或其他包含元素

1.当添加了float属性，且float不为none时

            2.添加定位，positio值为absolute或fixed

            3.将元素强制转换类型（display：inline-block，table-cell，table-caption）

            4.有body根元素或者存在父元素，或其他包含元素

            5.块元素添加overflow属性，且属性不能为visible

bfc能解决哪些问题？

1、解决外边距塌陷问题

当有两个div并且上边的div设置了margin-bottom:100px属性，下边的div设置了margin-top:100px;

我们会发现两个盒子上下距离不是200px而是100px，这种情况就叫做边距塌陷，而解决这种情况的方式就是在其中一个盒子外部套一个具有bfc属性的父盒子

实际情况如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

此时形成边距塌陷问题，解决办法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1,
        .div2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px;
        }

        .container {
            /* 添加bfc的触发条件，让其形成bfc区域 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="container">
        <div class="div2"></div>
    </div>
</body>

</html>

如此就解决了上下边距塌陷的问题

2、包含塌陷

当内部盒子设置margin-top属性时，父盒子会跟随内部盒子一起移动

实际情况如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: rgb(8, 240, 101);
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

3、清除浮动元素给后面的元素带来的影响

实际情况如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            /* float: left; */
        }

        .box2 {
            background-color: blue;
            /* float: left; */
        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

页面中有三个盒子，仅仅只设置宽高背景颜色，接下来，如果我们给上面两个盒子设置了float:left属性，那么会发生下面的情况：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

 

上图可以看出，第三个盒子被上面两个盒子盖住了，为了解决这种情况，我们在这里扩展一下清除浮动的方法：

1、给浮动元素添加具有bfc属性的盒子，这里我们通常会给父元素设置overflow:hidden;属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bfc div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }

        .bfc {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="bfc">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

</html>

 

2、隔墙法

在浮动元素后面添加一个没有宽高的盒子并设置属性：clear:both;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            background-color: blue;

        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }

        .aaa {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="aaa"></div>
    <div class="box3"></div>
</body>

</html>

3、伪元素法 （最常用）

给浮动元素一个父元素并设置如下属性：

.clearfix::after {

            content: "";

            display: block;

            width: 0;

            height: 0;

            overflow: hidden;

            clear: both;

        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            background-color: blue;

        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }

        .clearfix::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            overflow: hidden;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

</html>

 

 上述三种方法都能清除浮动，第一种最简单，第三种最常用也最专业，第二种不推荐使用。第二种和第三种的思想非常相似，但是第二种直接加元素会影响整体布局的结构合理性，第三种相较而言会更好。

快秃头的老阿姨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端面试复习篇前端面试复习篇
06-06
前端面试复习篇主要涵盖了一系列关于前端开发中关键概念和技术的复习。以下是对这些知识点的详细说明： 1. **盒模型**：盒模型是CSS布局的基础，包括content-box（W3C标准盒模型）和border-box（IE盒模型）。box-...
前端大厂面试思维导图-css面试
03-31
前端大厂面试题目思维导图，非常全面，包含了常见的面试题目，0.5px的线如何实现，sass的常用功能，弹性布局flex-direction，justify-content，align-items，css常见单位rpx、px、em、rem、%、vh、vw的区别，垂直...
数据结构学习笔记——线性表之顺序表
HiSi_的博客
09-02 1515
线性表的定义： 具有相同性质元素的一个有限序列。 序列中所含元素个数为线性表的长度。 线性表中每个元素由逻辑序号唯一确定，逻辑序号是由1开始的，而物理序号（我们说的数组的下标是从0开始的）。 序列中的第一元素叫做表头元素，最后一个元素叫做表尾元素。 线性表的抽象数据类型描述： ADT List { 数据对象： D = {ai | 1<=i<=n, ai为ElemType对象} //ElemType是自定义类型的标识符， //在后面的讨论中，ai是结构体类型的。 数据关系： R =
前端中的BFC是什么？
热门推荐
yigetutouzai的博客
07-05 1万+
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 MDN给出的解释是：BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。......
2024年前端最新前端面试：被问到BFC，要这样答才能满分，面试题目与答案
最新发布
2401_84617431的博客
05-13 607
而要解决这一现象，我们就需要清除浮动，这里我们就可以用到了：触发BFC的条件很多，这里我们以向父元素添加overflow(hidden)为例：（下面一节，我会为大家总结触发BFC条件有哪些常用方式）div {我们只需要在原基础上，向父元素添加overflow：hidden属性即可可见，只需要给父容器设置overflow: hidden属性就会触发BFC特性，这个父容器就会变为一个特殊的“其实这里展现了一个。因此这就是为什么BFC能清除浮动带来的负面效果的原因了！
前端之BFC解释说明
leilei__66的博客
07-11 1890
1、BFC定义 2、BFC的触发条件 3、BFC的特性 4、BFC功能总结
前端BFC
muzidigbig的博客
05-17 1437
块格式化上下文对浮动定位和清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。
前端知识点之BFC
PrototypeOne的博客
04-24 480
BFC 什么是BFC BFC：Block formatting context，中文块级格式化上下文。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由m
前端-什么是BFC？BFC布局规则、触发条件、应用场景
乌药ice
01-10 4280
什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子。 布局规则 内部的Box会在垂直方向，一个一个地布置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的Margin会发生重叠，也就是外边距塌陷。 每个元素的margin box的左边，
2023最新前端面试题总结
05-30
"前端面试题总结" 以下是根据给定文件信息生成的相关知识点： 浏览器兼容性 在前端开发中，浏览器兼容性是一个非常重要的问题。不同的浏览器对 HTML、CSS、JavaScript 的解析和执行方式不同，这导致了同一个页面...
前端面试精简篇前端面试精简篇
06-06
前端面试精简篇 本文档为前端面试精简篇，涵盖了 CSS 相关知识点，包括左边定宽右边自适应方案、左右两边定宽中间自适应方案、左右居中行内元素、上下垂直居中、盒模型等内容。 左边定宽右边自适应方案 在实现...
前端面试宝典.zip（校招、社招）
08-10
《前端面试宝典》是为前端开发者准备的一份详尽的面试指南，涵盖了从校招到社招的各种面试场景。这份资源旨在帮助开发者系统性地复习和掌握前端领域的核心知识点，提升面试竞争力。以下是其中各个篇章的主要内容： ...
前端基础——BFC
qq_41721660的博客
04-09 525
FC 概念 FC(Formating context)格式化上下文，是css2.1提出的一个视觉渲染的概念。它是页面中一块渲染的区域，并且有一套自己的渲染规则，它决定了其子元素如何排列，以及和其他元素之间的相互关系 BFC BFC--block formating context：块级格式化上下文，BFC是页面中的一个块级渲染区域。 概念： 指的是页面中的一个标签，不一定是块级标签。要成为BFC，有指定的满足条件。BFC有自己的排列规范，决定了BFC区域的子元素如何排列，以及与其他元素之间的相互关系
BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！
SmileLife123的博客
02-21 1653
BFC（Block Formatting Context）中文译为"块级格式化上下文"，简单来说，BFC就是给盒子加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面物品的摆放是不受外部影响。
浅谈什么是前端BFC
.伊泽瑞尔
05-18 1996
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
BFC知识总结
qq_41716992的博客
02-03 496
BFC的概念以及应用
学习块格式化上下文（BlockFormattingContext）
weixin_30472035的博客
08-20 199
什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。 视觉格式化模型定义了盒（Box）的生成...
前端面试题------BFC
m0_63732545的博客
08-22 83
BFC的全名是块级格式化上下文，是Formatting Context（格式化上下文）的一种类型，是CSS布局中的一个概念。BFC决定了元素在文档中的布局及其与其他元素的相互关系。BFC中的元素在垂直方向上一个接一个地排列，形成一个垂直的布局。BFC中的盒子之间相互隔离，使得它们的边界不会重叠。BFC中元素的内部框会根据自身的属性进行布局，例如浮动元素只会影响同属于一个BFC下的其他元素。BFC在页面布局中具有独立性，不受外部元素的影响。
【前端面试之CSS】如果是一个元素具备BFC属性，该元素有啥特点?
阿卡内的博客
07-18 275
BFC是什么
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行布局。在 BFC 中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（对于从右到左的格式化，右外边缘会触碰到右边缘），即使存在浮动也是如此。 BFC 的触发条件： - 根元素（html） - float 不为 none - position 为 absolute 或 fixed - display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 或 table-column 等 CSS3 属性 - overflow 不为 visible BFC 的主要作用: - 清除浮动：在 BFC 中，浮动元素会被包裹在一个矩形框中，不会影响到外部元素的布局，从而可以解决父元素高度塌陷的问题。 - 防止 margin 重叠：在 BFC 中，相邻元素的 margin 会被分开，不会发生重叠的现象。 - 控制元素的布局：在 BFC 中，元素的布局是相对独立的，不会受到外部元素的影响，从而可以控制元素的位置和尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值