BFC “块级格式化上下文” 学习

Daming 2019-11-18
0条评论 331 次浏览
Daming 2019-11-180条评论 331 次浏览

今天看文章 看到一个以前没看过的词,BFC 全称“块级格式化上下文”(Block Formatting Context)。BFC 类似一个“结界”,如果一个 DOM 元素具有 BFC,那么它内部的子元素不会影响外面的元素;外面的元素也不会影响到其内部元素。

平时布局的时候 清除浮动的一个技巧 float 的 overflow: hidden ,解决高度塌陷问题,子元素影响margin-top到父级 等问题,都是BFC的知识点(但我前面只知道怎么处理,并不知为什么这样 :stuck_out_tongue_closed_eyes: )

触发 BFC 的条件:
1. html 根元素
2. float 不为 none
3. overflow 为 auto,scroll,hidden
4. display 的值为 table-cell, table-caption,inline-block 中任何一个
5. position 的值不为 static 和 relative
6. display:flow-root(无副作用 兼容性差)
7. 加border

BFC特性:
1. 内部的盒子会在垂直方向上一个接一个的放置
2. 解决margin重叠的问题。(错误)
3. 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时,浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

网上很多文章说BFC可以解决margin重叠的问题,是因为浮动元素、inline-block 元素、绝对定位元素都在触发了BFC的同时解决了重叠问题。并不是BFC特性解决了margin重叠的问题。

应用场景:
1. 解决浮动子元素导致父元素,高度坍塌的问题
2. 解决文字环绕在float 四周的情况
3. 解决边距重叠问题 (父子,兄弟,空元素等)(错误)


BFC demo演示:http://demo.crazyming.com/?link=topic/d7/bfc.html

2+

发表评论

电子邮件地址不会被公开。