通过overflow:hidden 创建 BFC,固然可以解决高度塌陷的问题,但是大范围应用在布局上肯定不是最合适的,毕竟 overflow:hidden 会造成溢出隐藏的问题,尤其是与 JS 的交互效果会有影响。 我们可以使用 clearfix 实现清除浮动,这里就不多介绍了,想要了解的可以阅读前端面试题-clearfix(清除浮动)。 2.
前端面试题(16)—— BFC及其应用 定义: BFC(Block Format Context)块级格式化上下文,是页面盒模型中的一种CSS渲染方式,相当于一个独立的容器,里面的元素和外部元素相互不影响。 官方文档解释如下:A block formatting context contains everything inside of the element creating it that is not also inside a desc...
前端工程师之BFC机制 布局前端工程师容器backgroundclass BFC(Block Formatting Context),块级格式化上下文,它规定了内部的块级元素的布局方式,默认情况下只有根元素(即body)一个块级上下文。 张哥编程 2024/12/13 2110 关于BFC理解 c++容器csshtml 在进入BFC话题前,先来捋一下常见的定位方案,定位方案是控制元素的...
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定的规则进行物品摆放,并且不会影响其他环境中的物品。 如果一个元素符合出发BFC的条件,则BFC中的元素布局不受外部影响。 如果浮动元素会创建BFC,则浮动元素内部的子元素都受到该浮动元素的影响,所以浮动元素之间是互不影响的。 BFC的特性 BFC是一个...
BFC-Block Formatting Context BFC 的定义在官方文档中有描述。BFC（Block Formatting Context）格式化上下文是网页中盒模型布局的CSS渲染方式。 它是指一个独立的渲染区域或一个孤立的独立容器。形成BFC的原因？1、根元素（）2、浮动： float值非none3、overflow值非visible4、弹性布局：display值为inline-block、table...
前端面试:什么是BFC?如何解决BFC带来的问题?codereasy 立即播放 打开App,流畅又高清100+个相关视频 更多 6527 1 03:56 App 前端面试官:Object 和 Map 的区别是什么? 2597 1 03:03 App 前端面试:一道题考察你对 this 指向的理解 3210 3 03:08 App 前端面试:了解变量提升吗?请说出这段代码输出结果。
一、BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 2.通俗理解 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
【前端面试题】Vue单向和双向 1:42:00 【前端面试题】Promise和Generator 2:07:58 【前端面试题】vue组件和路由 2:10:59 【前端面试题】环境变量、axios二次封装、代理 1:33:57 【前端面试题】计算属性、生命周期、nextTick 1:45:39 【前端面试题】Vuex 1:52:51 【前端面试题】路由导航守卫、传值、watch...
最近在看前端面试相关的内容,顺便对有些内容做个整理 这篇也是参照了两位大佬的内容: 1.三元博客 2.学习 BFC (Block Formatting Context) 什么是BFC MDN中是这样解释的: BFC(Block Formatting Context): A block formatting context contains everything inside of the element creating it that is not also insid...
BFC容器之所以能够清除浮动,是因为BFC容器可以包裹浮动元素。 codeSandBox在线演示 3. 阻止元素被浮动元素覆盖 如果一个元素设置了浮动,但是下面的元素没有设置浮动,下面的元素会顶上来,形成一个浮动覆盖的效果,我们可以通过给非浮动元素设置成BFC元素,可以防止被浮动元素覆盖。