BFC(块格式化上下文)

一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生,浮动互相交互的区域。

一个块格式化上下文由以下之一创建:
根元素或其它包含它的元素
浮动 (元素的
float
不是 none
)
绝对定位的元素 (元素具有 position
为 absolute
或 fixed
)
内联块 inline-blocks (元素具有 display
: inline-block
)
表格单元格 (元素具有 display
: table-cell,HTML表格单元格默认属性
)
表格标题 (元素具有 display
: table-caption
, HTML表格标题默认属性)
块元素具有overflow
,且值不是 visible

display
: flow-root

一个块格式化上下文包括创建它的元素内部所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float
) 与清除浮动 (参见 clear
) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    clfeng阅读 481评论 0 0
  • 目录 内容 一. 我对标签、元素、盒子的理解 相信很多人和我之前一样,对于web的许多概念也都知道是什么意思,大家...
    科研者阅读 710评论 2 2
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 6,572评论 3 19
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 1,056评论 0 0