阅读 72

什么是BFC?

BFC(Block formatting context)块级格式化上下文，Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

文章分类
前端
文章标签
前端
相关推荐
  • 蛙人
    8月前
    CSS
    面试官：请说说什么是BFC？大白话讲清楚
    BFC到底是什么东西BFC，怎样触发BFC，BFC的规则，BFC解决了什么问题，一文搞懂，进来瞅瞅吧
    • 2.3w
    • 77
    面试官：请说说什么是BFC？大白话讲清楚
  • 带着眼镜的平头哥
    7月前
    CSS
    三个案例搞懂BFC
    BFC 1. 概念 这只是CSS布局知识中的一个普通概念，并不高深。 BFC的英文表达是Block Formatting Context，块格式化上下文。 首先要搞清楚什么是格式化上下文，Format
    • 345
    • 1
  • forever_Mamba
    2月前
    CSS
    谈一谈BFC
    面试中经常会遇到的问题。 何为 BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式
    • 127
    • 评论
    谈一谈BFC
  • 杰出D
    5月前
    前端 算法
    面试了十几个高级前端，竟然连（扁平数据结构转Tree）都写不出来
    「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」 前言 招聘季节一般都在金三银四，或者金九银十。最近在这五六月份，陆陆续续面试了十几个高级前端。有一套考察算法的小题
    • 7.1w
    • 992
    面试了十几个高级前端，竟然连（扁平数据结构转Tree）都写不出来
  • 我就是小陈呀
    1月前
    CSS
    BFC
    BFC创建了一块互不干扰的空间，外面的不会干扰到里面的，里面也不会干扰到外边的， 主要应用场景，外边距合并、清除浮动、两栏自适应...
    • 55
    • 评论
  • 没有昵称cpp
    3年前
    前端 CSS
    什么是BFC?
    对于BFC的概念以及应用场景一直都不是很明白，今天着重去了解了一下，做了以下总结。 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素…
    • 1.4w
    • 5
  • 无限循环无限
    1年前
    CSS
    详解BFC、IFC、GFC、FFC
    内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使…
    • 2954
    • 评论
  • 大帅老猿
    6月前
    前端 JavaScript
    产品经理：你能不能用div给我画条龙？
    事情是这样的，前天上午产品经理说想要做一个心愿墙，问我能不能行 我心想，这太容易了，但为了多摸一天鱼，我说还是有点挑战的 结果下午，产品经理和设计师就给我发来了设计参考 他们说，心愿墙的设计大致是这样
    • 8.3w
    • 523
  • Nordon
    1月前
    前端 CSS
    BFC及其应用
    这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战 BFC（Block Formatting Context)即块格式化上下文 定义： 作用： 具备BFC特性的元素会成为一个隔离
    • 131
    • 评论
  • 红尘炼心
    2月前
    前端 Vue.js React.js
    你会用ES6，那倒是用啊！
    不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。
    • 11.3w
    • 698
  • MeQingJe
    4月前
    CSS 前端
    什么是BFC？BFC的使用场景是什么？
    1. BFC的含义 2. 触发BFC的方式： 3. 实际例子（两端固定，中间自适应） 以浮动为例： 可以看到图中.center的宽度被两个浮动的元素压在了下面，若是想实现两边固定中间自适应，只需要给.
    • 178
    • 评论
  • ClariS
    4月前
    CSS 前端
    什么是 BFC？
    BFC 没有明确的定义 MDN 对 BFC 的描述 CSS规范中对 BFC 的描述 张鑫旭对 BFC 的描述 从以上描述中，我们知道了： BFC 的全称是Block Formatting Contex
    • 287
    • 评论
    什么是 BFC？
  • 陈大鱼头
    2年前
    CSS
    前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
    当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来…
    • 1.8w
    • 39
  • zz
    4月前
    前端 面试
    后端一次给你10万条数据,如何优雅展示，面试官到底考察我什么?
    背景 面试题:后台传给前端十万条数据,你作为前端如何渲染到页面上? 回答者A：我有句话不知当讲不当讲,这什么鬼需求。
    • 16.1w
    • 263
  • zuopf769
    4年前
    前端 CSS
    史上最全面、最透彻的BFC原理剖析
    本文讲了什么是BFC，BFC的概念是什么；咋样才能生成新的BFC; BFC的约束规则；BFC在布局中的应用：防止margin重叠； 清除内部浮动；自适应两（多）栏布局的
    • 1.1w
    • 6
  • 子弈
    1年前
    面试 前端
    在阿里我是如何当面试官的
    由于疫情关系，最近在掘金看到很多同学的工作情况内心还是蛮触动的（降薪、变相裁员、辞退等）。可能这并不是当下一个普遍的现象，但仍然使我感受到前端这碗青春饭不好混。于此同时联系我内推的同学很多都处于待业状态，能感受到他们内心的迷茫和焦灼。于是内心一直有声音督促我，赶紧写点面试相关的…
    • 10.2w
    • 240
  • Ashun
    5月前
    CSS 前端
    什么？你还不了解BFC？
    记住首图，后面要考(带你理解BFC)🐾 什么是BFC？ BFC 全称为block formating context（块级格式化上下文），它有什么作用呢？ ​ 若一个元素触发了BFC，则这个元素就可以
    • 252
    • 1
    什么？你还不了解BFC？
  • 水镜月
    2年前
    CSS
    BFC究竟是个什么东东？
    FC是Formatting Context的简写，直译过来是格式化上下文。其实并不是什么复杂的东西，个人对于它的理解是：FC就是html页面中的某个元素内的一套渲染规则，决定了其子元素如何布局，以及和其他元素在html页面中的位置。 比如说BFC, BFC是block form…
    • 3049
    • 3
  • 薛定谔的🐶、
    2年前
    CSS
    《面试系列》之什么是BFC?
    面试时常常会被问到有关BFC的问题，虽然网上有关讲解BFC的文章很多，基本大篇理论知识，虽收获不少，但面对面试时，却不知如何回答，不能条理清晰、简单明了的回答出面试官想考察的内容，容易导致回答着把自己都给弄晕了(尤其在紧张的情绪下，非常容易导致越说越“乱”，从而造成面试官觉得你…
    • 3858
    • 8
    《面试系列》之什么是BFC?
  • 潜龙入渊
    1年前
    CSS
    什么是BFC,BFC有什么用
    1. BFC里面的box都会以垂直方向排列 2. 同一个BFC里面中相邻的两个盒子的外边距会重叠 3. 每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样 4. BFC的区域不会和float Bo…
    • 3282
    • 4
    • 关于作者
    文章被阅读175
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
    296
    39
    前端面试之BFC
    132
    4
    什么是BFC?
    244
    5
    CSS中重要的BFC
    193
    22
    理解 CSS 布局和 BFC
    92
    7