JavaScript中BFC的使用

最新推荐文章于 2023-02-01 11:37:52 发布
最新推荐文章于 2023-02-01 11:37:52 发布
阅读量1.5k 收藏 4
点赞数 2
分类专栏： javascript CSS H5 文章标签： javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanfengzhishui/article/details/120532270
版权
javascript 同时被 3 个专栏收录
28 篇文章 0 订阅
订阅专栏
H5
9 篇文章 0 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏

BFC(Block formatting context)

直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

BFC属于普通流

    把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。

    ### 如何触发BFC,如何为元素添加BFC这个属性呢

        1.根元素 (<html>)

        2.浮动元素(元素的float值不是none)

        3.绝对定位(元素的position为absolute或fixed)

        4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、

        table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid

        5.overflow值不为visible的元素 即为 overflow:hidden;

        6.contain的值为layout-content,paint的元素

BFC特性和作用

1.可以避免外边距重叠

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:04:46
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 16:41:02
 * @Description: 
-->
<!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>8-BFC</title>
    <style>
        .cube{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
     </style>
</head>
<body>
    <div class="cube"></div>
    <div class="cube"></div>
</body>
</html>

本应该上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。

解决办法

        把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC

                .container{

                    overflow: hidden;

                }

修改后的代码： 

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:04:46
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 16:47:40
 * @Description: 
-->
<!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>8-BFC</title>
    <style>
        .cube{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
        .container{
            /*BFC触发*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cube"></div>
    </div>
    <div class="cube"></div>
</body>
</html>

2.清除浮动

正常我们希望的是看到一圈红色边框包裹着一个天蓝色方块，但是父元素失去了高度支撑；因为我们添加了浮动，使得子元素脱离了文档流，所以只剩下20px边距高度，同样，我们可以通过overflow属性触发父容器的BFC，从而达到清除浮动效果。

        ### css代码：
  

      .parent{

            border: 10px solid red;

        }

        .child{

            width: 100px;

            height: 100px;

            background-color: cyan;

            float: left;

        }

        ### html代码
        

<div class="parent">

            <div class="child"></div>

        </div>

    ### 解决办法 给父元素设置overflow属性触发父容器的BFC
        

 .parent{

            border: 10px solid red;

            overflow: hidden;

        }

未触发父容器的BFC之前：

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:13:17
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 16:55:39
 * @Description: 
-->
<!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>9-清除浮动</title>
    <style>
        .parent{
            border: 10px solid red;
            /* BFC未触发 */
            
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: cyan;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

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

 触发父容器的BFC之后：

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:13:17
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 16:55:39
 * @Description: 
-->
<!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>9-清除浮动</title>
    <style>
        .parent{
            border: 10px solid red;
            /* BFC触发 */
            overflow: hidden; 
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: cyan;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

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

 3.阻止元素被浮动元素覆盖

给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的BFC属性

css代码 

        .cube1{
            width: 100px;
            height:100px;
            background-color: cyan;
            float: left;
        }
        .cube2{
            width: 200px;
            height:200px;
            background-color: red;
        }

html代码：

<div class="cube1"></div>
<div class="cube2"></div>

解决办法

在cube2中添加BFC触发：overflow:hidden;

.cube2{
            width: 200px;
            height:200px;
            background-color: red;
            overflow: hidden;
        }

未触发BFC之前完整代码及结果图：

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:18:29
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 17:12:24
 * @Description: 
-->
<!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>阻止元素被浮动元素覆盖</title>
    <style>
        .cube1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .cube2{
            width: 200px;
            height: 200px;
            background-color: blue;
            /*overflow: hidden;*/
        }
    </style>
</head>
<body>
    <div class="cube1"></div>
    <div class="cube2"></div>
</body>
</html>

 触发BFC之后完整代码及结果图：

<!--
 * @Author: [jsh]
 * @Date: 2021-09-28 15:18:29
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-28 17:12:24
 * @Description: 
-->
<!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>阻止元素被浮动元素覆盖</title>
    <style>
        .cube1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .cube2{
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="cube1"></div>
    <div class="cube2"></div>
</body>
</html>

本文重点用overflow:hidden;这个BFC触发

南风花海
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 层叠级别&层叠上下文&BFC&包含块详解 学习笔记
qq_44999678的博客
09-18 956
BFC&IFC 其实在我们使用CSS的时候，有一些重要的概念是值得我们关注的，比如说我们讲的BFC和IFC，这些都是我们需要掌握的重点知识。接下来我来分享一下我在学习BFC/IFC时的理解和心得。如有错误望大家指正！谢谢。 首先我们来了解一些重要概念。 一，包含块： 我们创建了一个块级元素，其实当我们为其添加某些属性的时候，我们有时候会有一点顾及，有时候我们需要要知道它的父级元素的相关信息。假如子元素的位置和尺寸的大小需要通过父元素来决定(比如百分比)。那么我们就称父元素是一个包含块。一个元素的大小
bfc:使构建的组件可以被 browserify 使用
07-01
bfc 通过 Browserify 使独立组件构建成为必需。 主要用于使用 Component 构建并希望支持 npm 和 Browserify 的库。 npm install -g bfc 用法 bfc < ./build/build-standalone.js > ./dist/output.js 然后，您可以将dist/output.js作为 package.json 中的main字段，它需要加载就好了。 这很烂 是的。 但是 Browserify 会解析需要的依赖项，并且会因为无法解决它们而感到害怕。 这也意味着 Browserify 构建需要构建的组件而不是单个组件本身。 如果您的图书馆很小，通常不会有太大问题。
跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC
05-26 325
跟着9张思维导图学习Javascript 学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将 po 出我收集的 9 张 javascript 相关的思维导图（非原创）。 思维导图小tips： 思维导图又叫心智图，是表达发射性思维的有效的图形思维工具 ，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的...
前端面试题合集6-8（BFC详解，js判断变量类型方式详解，css样式权重/样式优先级）
qq_43682422的博客
08-09 343
BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。BFC布局规则：内部盒子会在垂直方向，一个接一个地放置。（其实就是block元素布局规则）如下图所示：Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。什么是边距重叠？.....................
浅谈BFC
热门推荐
一入前端深似海
07-28 1万+
程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 前面文章提及到了BFC这个问题，这篇文章就谈谈我个人对BFC的理解。 BFC是什么？ 首先说一下BFC是什么，概念从哪里来？BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。网页是一个一个盒子组成的，那么这个BFC到底有什么用途呢？看下面具体分析。 怎么触发...
01_08-js注释
dolphin066的博客
09-17 130
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS中BFC如何理解？
LeakCollector的博客
10-29 3611
BFC解析 BFC是什么？： bfc全称为块级格式化上下文(Block Fromatting Context)。 BFC如何产生？： 满足一下其中一种条件就可以触发BFC。 position:absolute; display:inline-block、table-cell、flex、table-caption或者inline-flex。 float:left/right; overflo...
盒模型和BFC
pgLi
04-23 642
一、深入理解CSS盒模型  如果你在面试的时候面试官让你谈谈对盒模型的理解，你是不是不知从何谈起。这种看似简单的题其实是最不好答的。  下面本文章将会从以下几个方面谈谈盒模型。基本概念：标准模型 和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例题（根据盒模型解释边距重叠）BFC（边距重叠解决方案） 基本概念盒模型的组成大家肯定都懂，由里向外content,padding,b...
[js] 面试 什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？
qq_14993591的博客
11-15 1308
BFC全称Block Formatting Context ，中文意思为块级格式上下文。 通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。 转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。 如何触发 BFC 浮动元素:float值除none以外的
【JS Web 前端知识库】6.说一说BFC
LIU_CAN的博客
02-01 104
说一说BFC
BFC-Book-Store
04-01
BFC-Book-Store
fne-bfc-gatsby
03-17
带有GatsbyJS和NetlifyCMS的FNE-BFC发展注释... proxy_url: http://localhost:8081/api/v1 运行npx netlify-cms-proxy-server ，然后运行gatsby develop 运行此命令以在当前Shell中使用Netlify Large Media： source
fedbook:前端修炼小册（Wenyuan's frontend developer book. Including HTML, CSS, JavaScript, etc.）
04-13
JavaScript 规范 Vue 项目规范 :up_arrow: 返回顶部 前端语言 HTML HTML 基本结构 语义类标签 未完结，待更新 CSS CSS 引入方式 选择器与样式优先级 伪元素和伪类 长度和单位 盒模型 定位（position） 浮动（float）...
wwa-windows-template:使用 ClojureScript 构建 Windows 应用商店应用程序的最小模板。 微软开放技术
07-12
使用 ClojureScript 构建最小模板。 用法 创建一个新项目： lein new wwa-windows my-app 编译 ClojureScript： cd my-app\my-app lein cljsbuild auto 运行应用程序： 在my-app\my-app.sln打开 Visual Studio...
什么是BFC？
本博客只是个人的知识点的小总结，方便自己查阅，能帮助到你是最好的，如果有不正确之处，欢迎你的指正
11-12 224
BFC这个知识点我在面试中（目前为止），就遇到过一次，但是直接被问傻了~因为只是大概记得BFC的概念以及部分触发BFC的情况，所以今天特意整理出来了一篇关于BFC的相关知识，所以在面试中，不仅仅是js的相关知识是重点，css也会涉及哦提示：以下是本篇文章正文内容，下面案例可供参考。
前端js布局——BFC与浮动
XUXIU182的博客
09-22 317
<!DOCTYPE html> <html> <head> <style> .left { background: yellow; float: left; width: 20%; } .middle { ...
BFC
卡卡的笔录
07-09 139
MDN 对 BFC 的描述 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： 根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行...
前端常说的BFC简单说明
weixin_46394771的博客
03-16 248
BFC概念 “块级格式上下文”，他是一个独立的渲染区域，只有block-level box参与，他规定了内部的block-level box如何布局，并且与区域外部毫不相干。 BFC布局规则 1.内部的box会垂直方向一个接一个的放置。 2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠。（默认按照两者中最大的margin值设置） 图示： 3.每个...
【js学习笔记五十四】BFC方式
geyaoisnice的博客
07-05 146
目录 前言 导语 总结 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 BFC 总结 // BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， //定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定，.......
什么时候使用BFC布局
最新发布
05-13
以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动属性后，它会脱离文档流并可以覆盖其他元素。此时可以将其父元素设置为 BFC，使得浮动元素只能在 BFC 内进行布局，从而避免...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值