3-16 BFC是什么?触发BFC的条件是什么?有哪些应用场景?

什么是BFC?看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187

简单来说 BFC (块级格式化上下文) 就是指定页面的盒子采用何种策略模式渲染盒子中的内容,

下列方式会创建块格式化上下文:

  1. 根元素或包含根元素的元素
  2. 浮动元素(元素的 float 不是 none)
  3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
  4. 行内块元素(元素的 display 为 inline-block)
  5. 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  6. 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  7. 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content或 strict 的元素
  11. 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  12. 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  13. 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  14. column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

有哪些应用场景?

  1. 清除浮动带来的margin 塌陷
  2. 解决margin 合并
  3. 。。。

本文作者:林见夕

本文链接:https://www.cnblogs.com/ifon/p/16012751.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   林见夕  阅读(46)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.