最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 详解CSS中的BFC

    正文概述 掘金(BenjaminShih)   2021-01-20   157

    什么是BFC?

    w3c是这么解释的:

    请注意,BFC并不是一个css属性,也不是一段代码,而是css中基于box的一个布局对象和单位,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。明确地,它是一个独立的盒子,并且这个独立的盒子内部布局不受外界影响,当然,BFC也不会影响到外面的元素。

    成为BFC的条件

    其实在w3c规范中已经简单罗列了称为BFC的基本条件,但我们还是详细说明下,保持记忆脉络清晰。

    一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:

    1. float的值不为none
    2. position的值不为static或者relative
    3. display的值为 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一个
    4. overflow的值不为visible
    5. 根元素

    BFC的特性

    BFC的特性可以总结为以下几点:

    1. BFC内部,盒子由上至下按顺序进行排列,其间隙由盒子的外边距决定,并且,当同一个BFC中的两个盒子同时具有相对方向的外边距时,其外边距还会发生叠加(Margin Collapse)
    2. BFC内部,无论是浮动盒子还是普通盒子,其左总是与包含块的左边相接触(从右到左的的格式,否则为与右边框相接触)
    3. BFC 区域不会与float box区域相叠加
    4. BFC内外布局不会相互影响
    5. 计算BFC高度的时候,浮动元素的高度也计算在内

    触发BFC

    根据成为BFC的条件,一般有以下4种方法触发BFC:

    1. display: table 前后带有换行符,我们一般也不常用
    2. overflow: scroll 可能会出现不想要的滚动条,丑
    3. float: left 万一我们不想让元素浮动呢?
    4. overflow: hidden 比较完美的创建BFC的方案,副作用较小,仿佛遇到了我的心动女生

    BFC能解决的问题

    1. 解决margin collapse(外边距叠加)

    什么是外边距叠加?复述一遍:

    See the Pen <a href='http://codepen.io/BenjaminShih/pen/xgobbO/'>xgobbO</a> by junnan shi (<a href='http://codepen.io/BenjaminShih'>@BenjaminShih</a>) on <a href='http://codepen.io'>CodePen</a>.

    如上述展示,我们将内部灰色盒子的垂重margin设置为和自身高度一样,按自然思维两个盒子之间的距离应该是两个盒子的高度,由于外边距叠加,只剩下一个身位的高度。

    要解决上述问题,设想:如果他们属于不同的BFC,他们之间的外边距将不会折叠。我们给其中的一个盒子外部包裹一层父盒子,并成为一个BFC。

    See the Pen <a href='https://codepen.io/BenjaminShih/pen/rjENrE'>rjENrE</a> by junnan shi (<a href='https://codepen.io/BenjaminShih'>@BenjaminShih</a>) on <a href='https://codepen.io'>CodePen</a>.

    现在可以清楚地看到,第一个盒子由于不再和其他其他同类名盒子在同一个BFC中,它和第二个盒子的外边距并没有发生叠加

    总的来讲,外边距叠加本身是由BFC引起的,但是现在我们要用BFC来解决这个问题,颇有点以毒攻毒的味道。

    2.清除浮动

    想想那些年我们一起清除过的浮动,解决方式是什么?clear: both?父元素一起浮动?这些都没错,但是作为前端开发者,我们解决问题应该需要掌握多种技能,以适应多种不同的问题环境,偶尔还可以装装X:)

    我们往往会遇到这样一种情况,父元素高度自适应,子元素浮动,因为不在同一文档流中,父元素的高度会坍塌,如下所示:

    See the Pen <a href='http://codepen.io/BenjaminShih/pen/egwmNY/'>egwmNY</a> by junnan shi (<a href='http://codepen.io/BenjaminShih'>@BenjaminShih</a>) on <a href='http://codepen.io'>CodePen</a>.

    这个时候,我们可以利用BFC来解决问题,根据是:计算BFC高度的时候,浮动元素的高度也计算在内

    我们通过添加overflow: hidden,在容器中创建一个新的BFC,效果如下:

    See the Pen <a href='http://codepen.io/BenjaminShih/pen/OWePVE/'>OWePVE</a> by junnan shi (<a href='http://codepen.io/BenjaminShih'>@BenjaminShih</a>) on <a href='http://codepen.io'>CodePen</a>.

    只需要添加一个属性,效果不错吧~

    3.实现两栏布局

    一般的后台管理系统,很多都是传统的左菜单右内容的两栏布局,我们经常会选择左栏浮动,右边设置左padding或者margin的思路来实现这一做法,其实利用BFC也可以创建两栏布局,根据是:BFC 区域不会与float box区域相叠加

    See the Pen XpLJXm by junnan shi (@BenjaminShih) on CodePen.

    简单吧~

    结尾

    前端知识网络错综复杂,包括各种hack和黑科技,难免疏漏,或有不对之处,欢迎交流


    起源地 » 详解CSS中的BFC

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元