bfc 是什么

子凡 问答 2019-06-19 09:32:35 阅读(...)

BFC即 Block Formatting Contexts (块级格式化上下文), 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

BFC 即 Block Formatting Contexts (块级格式化上下文), 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

css

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

一个块格式化上下文(block formatting context) 是 Web 页面的可视化 CSS 渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。一个块格式化上下文由以下之一创建:

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell,HTML 表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
  • 具有 overflow 且值不是 visible 的块元素,
  • display: flow-root
  • column-span: all 应当总是会创建一个新的格式化上下文,即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
  • 一个块格式化上下文包括创建它的元素内部所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

0个人收藏 收藏

评论交流

泪雪默认头像 请「登录」后参与评论
  1. 加载中..

相关推荐

  • 排名 ranking

    淘宝号降权是什么意思

    淘宝号降权是指淘宝平台对于某些卖家账号进行的降低搜索排名和展示频率的处罚。这意味着被降权的账号的商品在淘宝搜索结果中排名会更低,展示频率也会变小,这会影响商品的销量和曝光率。
  • 腾讯 WeTest

    腾讯WeTest是什么

    WeTest是腾讯官方出品的一站式质量云,致力于产品质量标准建设和产品品质提升,依托10余年腾讯产品品质管理经验,历经千款腾讯产品磨砺。平台集成云手机、兼容测试、功能测试、性能测试、安全测试、自动化测试等优秀产品服务,满足众多开发者从研发到运营各阶段的测试需求。
  • Bitlocker

    Bitlocker分区解密软件是什么

    Bitlocker分区解密软件是一款针对因各种原因导致Bitlocker分区打不开从而数据丢失进行恢复的软件。Bitlocker是微软自Vista后开始提供的一个自带的加密工具。而这一功能最大的好处就是更好的防止数据失窃或恶意泄漏问题的发生。
  • 达芬奇视频调色软件 DaVinci Resolve

    DaVinci Resolve是什么

    DaVinci Resolve(达芬奇)是一款在同一个软件工具中将剪辑、调色、视觉特效、动态图形和音频后期制作融于一身的视频调色软件。它采用美观新颖的界面设计,易学易用,能让新手用户快速上手操作,还能提供专业人士需要的强大性能。
  • 科幻画 Science fiction painting

    科幻画是什么

    科幻画是指科幻题材的漫画或插画作品。科幻画通常是基于科学幻想或未来世界的想象,在作品中经常出现未来科技、外星人、机器人、虚拟现实等元素。它可能是一种虚构的故事,也可能是对现实世界的某种展望或预测。
  • TestFlight

    TestFlight是什么

    TestFlight是苹果公司推出的一款应用测试工具。它可以帮助开发者在应用发布之前,在iOS、macOS和tvOS上测试应用。TestFlight可以让开发者向特定的测试用户提供应用的beta版本,开发者可以使用TestFlight收集反馈并在发布之前修复问题。