一、定义:
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. sql无限级树型查询

    表结构如下: 表数据如下: 一提到无限级,很容易想到递归,使用sql 的CET语法如下 with menu(Id,Name,ParentId,Level) as ( select Id,Name,Pa ...

  2. delphi android 录像(使用了JMediaRecorder,MediaRecorder的使用方法)

    delphi xe系列自带的控件都无法保存录像,经网友帮忙,昨天终于实现了录像功能(但有个问题是录像时无画面显示),程序主要使用了JMediaRecorder,MediaRecorder的使用方法可参 ...

  3. 千锋很火的SpringBoot实战开发教程视频

    springboot是什么? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  4. 关于RHEL5中yum挂载iso源引起的问题(转)

    今天在虚机上通过yum挂载iso源来安装rpm包,但提示错误,内容见下面.之前也有过这样的操作, mount后,修改repo文件,然后就可以yum install  rpm包了:过程很简单啊.不知道这 ...

  5. LoadRunner添加检查点

    见过磕长头的人吗?他们的脸和手都很脏,可是心灵却很干净. ——<可可西里> 1.选择需要设置检查点的内容 有如下“添加客户”功能,添加任务操作完成之后,我希望检查是否添加成功.从图中可以看 ...

  6. CISCO-从TFTP上上传/下载配置文件

    1.下载配置文件到TFTP服务器: 2.上传配置文件到路由器

  7. 机器学习:Principal components analysis (主分量分析)

    Principal components analysis 这一讲,我们简单介绍Principal Components Analysis(PCA),这个方法可以用来确定特征空间的子空间,用一种更加紧 ...

  8. eslintrc.js

    此插件主要就是规范前端程序员编写JS的规范,让代码看上去很优雅,也便于后期人员的重构和维护. 因为是用vue的cli搭建项目工程,使用了eslintrc.js ,但是在写JS时发现,首字母缩进一直报错 ...

  9. NOI 2012 魔幻棋盘 | 二维差分 + 二维线段树

    题目:luogu 2086 二维线段树,按套路差分原矩阵,gcd( x1, x2, ……, xn ) = gcd( xi , x2 - x1 , ……, xn - xn-1 ),必须要有一个原数 xi ...

  10. dockerfile_nginx+PHP+mongo数据库_完美搭建

      基于dockerfile创建nginx+PHP+mongo数据库_完美搭建     第一步:   从git上:git clone http://git.oursdata.com/wangyue/d ...