10 分钟了解什么是 BFC
BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和我一样不知道的
什么是BFC?
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
怎么触发BFC?
只要元素满足下面任一条件即可触发 BFC 特性:
-
-
绝对定位元素:position为absolute或fixed
-
display为inline-block、table-cell、flex、inline-flex、table-caption
-
overflow除了visible以外的值(hidden、auto、scroll)
- body根元素
BFC的渲染规则
<section id="margin"> <style> #margin{ background:pink; overflow:hidden; } #margin p{ margin:5px auto 25px; background:red; } </style> <p>1</p> <p>2</p> </section>
这其实不是css的bug,我们可以将其理解为是一种规范。如果我们想要避免外边距重叠的话,根据同一个BFC容器下面的元素才会发生折叠的原理,我们可以将他们放在不同的BFC容器中
解决方法:
将发生重叠的盒子放在另外一个BFC容器中,即添加一个父盒子,将该盒子设置为BFC容器
<section id="margin"> <style> #margin{ background:pink; overflow:hidden; } #margin p{ margin:5px auto 25px; background:red; } </style> <p>1</p> <div style="overflow: hidden"> <p>2</p> </div> <p>3</p> </section>
2. BFC可以包含浮动的元素
我们都知道,浮动的元素都会脱离文档流,我们来看一下下面的例子
<section id="layout"> <style> #layout{ background:red; } #layout .left{ float: left; width: 100px; height: 100px; background: pink; } #layout .right{ height: 110px; background: green; } </style> <div class="left"></div> <div class="right"></div> </section>
效果图:
通过这个图我们可以看出,右侧的盒子因为高度比左边的高之后,因为BFC的缘故,就延申到它的左侧去了。这个例子我们做前端的应该是经常遇到的,很多人知道应该怎么解决,但是却不知道它的原理,这是因为BFC的缘故
解决方法:
给右侧的盒子设置为BFC容器,添加overflow属性,注意overflow不能为visible
<section id="layout"> <style> #layout{ background:red; } #layout .left{ float: left; width: 100px; height: 100px; background: pink; } #layout .right{ height: 110px; background: green; overflow: auto; } </style> <div class="left"></div> <div class="right"></div> </section>
3.计算BFC高度时,浮动元素也参与计算
下面我给大家举一个非常常见的例子:
<section id="float"> <style> #float { background: red; } #float .float { float: left; font-size: 30px; } </style> <div class="float">我是浮动元素</div> </section>
相信大家在开发的时候肯定有遇到过这个,子元素浮动之后,子元素的高度没有算到父元素上面,导致父元素的高度为0
解决方法:
给父元素设置为BFC,添加overflow:hidden属性
<section id="float"> <style> #float { background: red; overflow: hidden; } #float .float { float: left; font-size: 30px; } </style> <div class="float">我是浮动元素</div> </section>
4 . BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
例子在2,3里面有体现
推荐阅读
-
2024-10-08 Ask AI:【人工智能面试题】什么是人工智能?- 网络星火
-
了解前端项目渲染模式们-什么是XXR?
-
了解前端项目渲染模式:什么是 XXR?
-
1024程序员节及程序员职责:您需要了解什么是1024程序员节以及程序员的工作内容
-
蓝牙技术深度解析:了解什么是蓝牙
-
你有兴趣花10分钟深入了解数据分析的技巧与方法吗?
-
汽车后面的字母是什么意思?-增压发动机 类型一:TSI 大众的TSI在国内外有着不一样的意思,国外的意思是Twincharger Stratified ion,指双增压(涡轮和机械增压)分层喷射技术。而国内的意思,T代表涡轮增压,Si代表燃油直喷,而不是T与FSI的简称,并没有燃油分层喷射技术,因为国内燃油质量一般,达不到分层喷射的要求。 在国内,我们经常会看到不同的TSI标志。有全红的、有就“SI”是红的、还有只有“I”是红的。但大家别误会他们技术不一样,这只是为了区分不同的排量而已。例如:2.0排量和1.8排量为“SI”是红色的,而2.0TSI车型中的高配车型或者高端车型则使用全红的标识,那么1.4排量的当然只能是只有“I”是红色的了。 类型二:TFSI TFSI发动机也是涡轮燃油直喷发动机它可以说是FSI发动机和涡轮增压器的结合。即涡轮增压(Turbocharger)+FSI。它的T和TSI中的T一样,表示采用涡轮增压技术,后面的FSI即燃油分层喷射发动机(Fuel Stratified ion),S表示“分层次的”。TFSI发动机既分层喷射,又有涡轮增压,是TSI发动机的升级版。 类型三:TDI TDI是英文Turbo Direct ion的缩写,意为涡轮增压直接喷射柴油发动机。 为了解决SDI(自然吸气式柴油发动机)的先天不足,人们在柴油机上加装了涡轮增压装置,使得进气压力大大增加,压缩比一般都到10以上,这样就可以在转速很低的情况下达到很大的扭矩,而且由于燃烧更加充分,排放物中的有害颗粒含量也大大降低。TDI技术使燃油经由一个高压喷射器直接喷射入气缸,因为活塞顶地造型是一个凹陷式的碗状设计,燃油会在气缸内形成一股螺旋状的混合气。 自然吸气发动机类型一:CGI/CDI 发动机CGI技术是一种奔驰公司开发的缸内直喷技术。供油动作已完全独立于进门与活塞系统之外,ECU也因而拥有更多的主导权。超乎传统喷射理论的稀薄燃烧与更多元的混合比便得以实现。在稳定行进或低负载状态下,采用缸内直喷设计的发动机得以进入Ultra lean(精实)模式。 在此设定下,发动机于进气行程时只能吸进空气,至于喷油嘴则在压缩行程才供给燃料,以达到节约的效果。根据实际测试,其最高能达到1:65的油、气比例,除了节能表现相当惊人,整体动力曲线也能够维持相当高的平顺度。而CDI则为该技术的柴油版本。类型二:VVT/CVVT/VVT-I/MIVEC/VTEC/i-VTEC 发动机可变气门正时技术(VVT,Variable Valve Timing)原理是根据发动机的运行情况,调整进气(排气)的量,和气门开合时间、角度,使进入的空气量达到最佳,提高燃烧效率。优点是省油,功升比大而缺点是中段转速扭矩不足。 目前本田的VTEC、i-VTEC、;丰田的VVT-i;日产的CVVT;三菱的MIVEC;铃木的VVT;现代的VVT;起亚的CVVT;江淮的VVT;长城的VVT等也逐渐开始使用。总的说来其实就是一种技术,名字不同。 但部分车型仅具有可变气门技术而没有正时技术,虽然比一般发动机要省油,但依然赶不上带正时技术的发动机。绿色发动机 类型一:Hybrid
-
快速了解QUIC协议:10分钟梳理HTTP/2的升级版
-
一分钟了解电脑关机快捷键是什么!
-
3分钟搞懂什么是编译执行和解释执行《轻松搞定大厂面试》