一、定义:
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. 数据挖掘项目之---通过对web日志的挖掘来实现内容推荐系统

    先说一说问题,不知道大家有没有这样的经验,反正我是经常碰到. 举例1,某些网站每隔几天就发邮件给我,每次发的邮件内容都是一些我根本不感兴趣的东西,我不甚其扰,对其深恶痛绝.         举例2,添 ...

  2. GCJ Qualification Round 2016 C题

    题意是给定了一个叫“jamcoin”的定义,让你生成足够数量满足条件的jamcoin. jamcoin其实就可以理解成一个二进制整数,题目要求的要么长度为16位,要么为32位,一头一尾两个位必须是1, ...

  3. EasyPlayer iOS开源流媒体播放器中AAC解码PCM问题

    本文转自EasyDarwin开源团队成员Penggy的博客:http://www.jianshu.com/p/feeb107b6657 最近遇到在 iOS 平台上实时播放 AAC 音频数据流, 一开始 ...

  4. ffmpeg推送,EasyDarwin转发,vlc播放 实现整个RTSP直播

    部署EasyDarwin流媒体服务器 ffmpeg推送摄像机视频到EasyDarwin VLC播放 第一步:部署EasyDarwin流媒体服务器 EasyDarwin的部署过程我们就不再赘述了,在Ea ...

  5. poi 处理excel 小数问题 整数不保留小数位 整数多.0

    读取的单元格为 hssfCell ,传入下面我提供的方法处理默认poi返回的为DOUBLE,所有先转为Long判断下,再进行返回: private String getValue(Cell hssfC ...

  6. ElasticSearch(九)基于version进行乐观锁并发控制

    一.基于version进行乐观锁并发控制 1).查看一条document GET /test_version/test_version_type/ { "_index" : &qu ...

  7. css position弹性盒子测试

    总结: 1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行: 2.设置父框架的padding为100px,div进行float,p ...

  8. html5--5-4 绘制矩形

    html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...

  9. js日期的初始化的格式

    js在初始化日期对象时,如果有传入日期.则格式有兼容性问题: //下面的写法在谷歌下没有问题,在火狐和ie下有问题var time = new Date('2014-11-27 00:00:00'); ...

  10. Ueditor文本编辑工具栏自定义

    1.找到 ueditor.config.js 文件 2.在 toolbars 数组内进行删减,添加 , toolbars: [[ 'fullscreen', 'source', '|', 'undo' ...