HTML元素BFC特性笔记

陌路散爱 提交于 2019-12-02 05:09:53

BFC(block formatting context): 块级格式化上下文

表现形式是:元素形成了一个封闭空间,其内的子元素和外部文档流互不影响。
主要可以解决两个问题:浮动影响、父子元素上下margin合并。
产生方式:
1、根元素自带;
2、float属性计算值为:left、right;
3、overflow属性计算值为: auto、scroll、hidden(常用)
4、display属性计算值为:table-cell、table-caption、inline-block
5、position属性计算值为: absolute、fixed
PS:之所以说计算值是因为,inherit变量动态继承父元素属性值,initial变量重置为初始值,unset变量先看inherit再看initial

1、清除浮动影响

在布局方面,和margin相比:
如果左边浮动元素的大小变化,margin需要重新设置来让出合适位置,而BFC则会自适应。

2、阻止父子元素margin合并

拥有BFC特性的元素,它的上下margin不会和它的子元素的margin进行合并,当然它的子元素间的margin合并不受影响。

参考文档

1、《CSS世界》 作者:张鑫旭 第六章第三小节(6.3)

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!