一:BFC是什么东东

  了解BFC前先一了解一下Box和Formatting Context

  (1)B: BOX即盒子,页面的基本构成元素。分为 inline 、 block 和 run-in 三种类型的BOX

  (2)FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

        常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)

  BFC 定义

    BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

  BFC布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置。

  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  4. BFC的区域不会与float box重叠。

  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  6. 计算BFC的高度时,浮动元素也参与计算

二:那些元素会生成BFC

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

三:BFC的作用及原理

  1.自适应两栏布局:

  

  布局规则第3条:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  因此,即使存在浮动的aside,main的左边依然会与包含块的左边相接触。

  布局规则第4条:BFC的区域不会与float box重叠。

  我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。  

.main{
overflow: hidden;
}

  

  2.清除内部浮动:

  布局规则第6条:计算BFC的高度时,浮动元素也参与计算

  

  给 par 添加属性: overflow:hidden;则会使 par 生成 BFC,其内部的 child 则会参与高度计算。

  3.防止处置 margin 重叠

  布局规则第2条:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  

  HaHa 和 HeHe margin 上下发生了重叠。

  解决方案:给 HeHe 外层套一个 BFC 的 BOX就OK了:

  

  

BFC的深入理解的更多相关文章

  1. BFC的基础理解及应用场景

    最近学习了BFC,开始学习的时候,单纯看概念,有种云里雾里的感觉,字都认识,凑一起啥意思大致也知道,但是具体有什么用呢? 这个就有点迷迷糊糊的,经过老师的讲解,以及自己课后的代码实验与总结,就拨云见日 ...

  2. 5月23日——谈谈对BFC规范的理解

    一.什么是BFC? BFC(block  formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...

  3. BFC的个人理解

    BFC是Block Formatting Context (块级格式化上下文)的缩写,是一个独立的渲染区域,这个东西的存在是为了隔绝一些内部子元素对外部元素的影响. 例如: 我们用overflow:h ...

  4. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

  5. 对BFC规范的理解

    什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...

  6. 对BFC的深层理解

    BFC(Block Formatting Context)块级格式化上下文 注意:BFC首先是块,其次需要具备下面的条件之一才可以(通俗来说,BFC就好比一所985或者211的高校,想要成为985或者 ...

  7. BFC深入理解

    BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...

  8. 深入理解BFC和Margin Collapse

    深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...

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

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

随机推荐

  1. Nginx编译配置杂记

    1.http://nginx.org/download/nginx-1.6.3.tar.gz 2. [root@track nginx-1.6.3]#./configure --prefix=/usr ...

  2. Python的方法解析顺序(MRO)[转]

    本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...

  3. Kakfa重连测试

    在Kafak已启动的情况下: 发送端首次连接大概耗时400毫秒.后续消息发送都在1毫秒以下. 接收端首次连接大概耗时400-7000毫秒.后续消息接收都在1毫秒以下.(具体时间与topic中存留的消息 ...

  4. Python之路【第一篇】:Python简介和入门

    python简介: 一.什么是python Python(英国发音:/ pa θ n/ 美国发音:/ pa θɑ n/),是一种面向对象.直译式的计算机程序语言. 每一门语言都有自己的哲学: pyth ...

  5. Mysql导入数据命令

    转自:http://blog.sina.com.cn/s/blog_610997850100mwv8.html 今天碰到个问题要用phpmyadmin导入1G的数据,但是在怎么都导入不了,用命令行就可 ...

  6. SVN和Git下载地址

    SVN: TortoiseSVN:https://tortoisesvn.net/downloads.html (安装包和语言) Git: Git for Windows:https://git-fo ...

  7. Cufflinks

    Transcriptome assembly and differential expression analysis for RNA-Seq. Cufflinks assembles transcr ...

  8. Total Commander 集成、调用 Beyond Compare比较文件

    1.打开wincmd.ini文件 2.在[Configuration]节下加入 Comparetool=d:\Program Files\小工具\Beyond Compare 3\BCompare.e ...

  9. 【阮一峰】深入研究URL编码问题及JavaScript相应的解决方案

    作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上 ...

  10. 第3月第8天 RefCounted PlistBuddy

    1.RefCounted引用计数 class Frame : public RefCounted<Frame> { // ... } http://www.cnblogs.com/dsky ...