一、定义:
BFC就是一个黑盒子,可以保证盒子内部元素不管如何变化,都不会影响盒子附近的元素;它属于普通流、浮动、定位方案中的普通流。

二、触发条件:
1.body;
2.float(不包含none),position(不包含static);
3.display 为 inline-block、table-cells、flex
4.overflow(不包含visible)

三、BFC特性以及其应用:
1.同一个BFC盒子下面的2个元素的下外边距会发生折叠;
2.BFC元素可以包含浮动元素;
3.BFC可以阻止被浮动元素覆盖;(可以用这个实现2列自适应布局)

内容提取来源:https://zhuanlan.zhihu.com/p/25321647

css之BFC(block formmatting context)[格式化上下文]的更多相关文章

  1. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

  2. 对于BFC(block format context)理解

    目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...

  3. BFC(块级格式化上下文)

    渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...

  4. 基础总结(02)--BFC(块级格式化上下文)

    BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...

  5. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  6. BFC (Block formatting context)

     一:BFC 是什么      MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...

  7. BFC(块级 格式化上下文)的理解

    本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...

  8. BFC 块级元素格式化上下文

    Block Formatting Contexts: 块级元素格式化上下文块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用 普通文档流的布局规则 ...

  9. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

随机推荐

  1. iOS 图像处理-剪裁图像

    解决这个问题:依照某一长宽比例,剪裁图片的上部和下部.保留中间的内容.当然也能够自己定义须要剪裁留下的区域 前提:须要加入Framework:CoreGraphics.framework 代码: - ...

  2. 多线程(C++)临界区Critical Sections

    一 .Critical Sections(功能与Mutex相同,保证某一时刻只有一个线程能够访问共享资源,但是不是内核对象,所以访问速度比Mutex快,但是没有等待超时的功能,所以有可能导致死锁,使用 ...

  3. 支付宝cookie 是支付密码 不是登录密码

    开发文档/ 手机网站支付 / 产品介绍 开放平台文档中心 https://docs.open.alipay.com/203/105288

  4. ABAP 通过字段找表程序

    2.获取数据保存在哪个数据表的方法: 1.前台对指定栏位 使用F1帮助找表,2.st05 跟踪业务操作过程,检索需要的数据表,(此方法找表很高效)3.对于文本字段找表,可以找到前台维护处,->维 ...

  5. machine learning for hacker记录(3) 贝叶斯分类器

    本章主要介绍了分类算法里面的一种最基本的分类器:朴素贝叶斯算法(NB),算法性能正如英文缩写的一样,很NB,尤其在垃圾邮件检测领域,关于贝叶斯的网上资料也很多,这里推荐那篇刘未鹏写的http://mi ...

  6. machine learning for hacker记录(2) 数据分析

    本章主要讲了对数据的一些基本探索,常见的six numbers,方差,均值等 > data.file <- file.path('data', '01_heights_weights_ge ...

  7. Java诊断工具Arthas

    Java诊断工具Arthas 1. Arthas简介 Arthas是阿里开源的一个线上java诊断工具,发现阿里还是挺喜欢开源一些技术的,造福人类.昨天试用了一下,发现真是强大,解决了我工作两年的很多 ...

  8. POJ 2485 Highways(最小生成树+ 输出该最小生成树里的最长的边权)

                                                                                                         ...

  9. ffmpeg av_interleaved_write_frame Operation not permitted

    今天在使用ffmpeg时出现了Operation not permitted通过增加打印信息发现是在av_interleaved_write_frame出现的问题, 昨天还没出现这个问题,很奇怪,就把 ...

  10. HTML页面下雪特效

    1. [代码][HTML]代码     <a  href="javascript:void(function(){var d = document,a = 'setAttribute' ...