BFC

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) 很重要。==定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素==。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

MDN BFC
深入理解BFC和Margin Collapse

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 6,572评论 3 19
  • CSS布局模型 布局:将元素以正确的大小摆放在正确的位置上 CSS包含3种基本的布局模型流动模型(Flow)浮动模...
    _空空阅读 1,074评论 0 4
  • 转载自(http://web.jobbole.com/83274/) BFC BFC全称是Block Format...
    居客侠阅读 2,150评论 0 20
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    陌客百里阅读 536评论 3 4