资讯专栏INFORMATION COLUMN

WEB前端CSS中的BFC是什么

IT那活儿 / 3161人阅读
WEB前端CSS中的BFC是什么
点击上方“IT那活儿”,关注后了解更多内容,不管IT什么活儿,干就完了!!!



什么是BFC
BFC是Block Formatting Context的缩写,格式化上下文,是指一个独立的渲染区域或者独立容器,我们可以理解为一个封闭的独立空间,无论如何也不会影响到它的外面。



创建BFC
  • 浮动元素,float除none以外的值;

  • 绝对定位,position(absolute,fixed);

  • display的值为以下的其中一个,inline-block,table-cell,table-caption,flex;

  • overflow除了visible以外的值(hidden,auto,scroll);

  • body根元素。

注:足其中一个即可。


BFC的特性
  • 内部的盒子会在垂直方向上一个接一个的放置;

  • 垂直方向的距离是有margin决定;

  • BFC的区域不会与float的元素区域重叠;

  • 计算BFC高度时,浮动元素也参与计算;

  • BFC就是一个独立容器,容器里面的子元素不会影响外面的元素。



BFC的应用场景
1. 边距重叠问题
要实现两个盒子中间隔30px,创建BFC,给父盒子p标签一个overflow:hidden属性。
如图:
2. 盒子塌陷
需求是只需要里面的子盒子向下移动20px,如果没有创建BFC,外面的父盒子也会向下移动20px,为了避免这种情况发生,给父盒子一个overflow:hidden属性。
如图:
3. 清除浮动
父盒子里面有两个子盒子,浮动后会脱离标准文档流,会遮住后面的box盒子,显然这是我们不希望看到的,所以我们要给父盒子overflow:hidden属性创建BFC,这样box盒子就会显示完整。
如图:
4. 文字环绕问题
Son盒子浮动后,text盒子文字会环绕在周围,给text盒子创建BFC后,文字与左边的盒子就会分开,不会环绕。
如图:



本文作者:朱 维

本文来源:IT那活儿(上海新炬王翦团队)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/129549.html

相关文章

  • 几个前端工程师应当掌握的“词语”

    摘要:学堂码匠各类前端术语知多少有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。 HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在...

    shusen 评论0 收藏0
  • 几个前端工程师应当掌握的“词语”

    摘要:学堂码匠各类前端术语知多少有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。 HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在...

    Bowman_han 评论0 收藏0
  • 几个前端工程师应当掌握的“词语”

    摘要:学堂码匠各类前端术语知多少有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。 HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在...

    worldligang 评论0 收藏0
  • 前端程序员需要掌握的几个专业“词语”

    摘要:有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好一方面能够让自己能够更专业的谈论知识,另一方面,在面试的时候也能够应对一些爱问前端名词的面试官是的缩写,表示的是万维网联盟。 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。 明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业...

    mingde 评论0 收藏0

发表评论

0条评论

IT那活儿

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<