BFC是什么
Posted 火腿肠烧烤大赛冠军
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC是什么相关的知识,希望对你有一定的参考价值。
什么是BFC
BFC:块级格式化上下文(Block Formatting Context),是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者是一个独立的容器;可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
BFC特性
- 内部的盒子(Box)会在垂直方向上一个接一个的放置;
- 垂直方向上的距离由margin决定,属于同一个BFC的两个相邻的块级元素会发生margin合并,不属于同一个BFC的两个相邻的块级元素不会发生margin合并;
- 每个盒子的左边,与包含块的左边相接触(从右往左的格式,右边缘接触)。即使存在浮动也是如此,除非产生了新的BFC;
- BFC的区域不会与float box重叠;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;外面的元素也不会影响到容器里面的子元素;
- 计算BFC的高度时,浮动元素也参与计算。
触发BFC的方式
- float不为none
- position:absolute、fixed
- overflow部位visible
- display:table-cell、inline-block
所解决的问题
- 父子组件margin重叠(给父元素属性形成BFC即可)
- 相邻元素垂直外边距问题(给其中一个元素包裹父元素触发BFC)
- 高度坍塌
以上是关于BFC是什么的主要内容,如果未能解决你的问题,请参考以下文章