一: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. 记一次MYSQL更新优化

    引言 今天(August 5, 2015 5:34 PM)在给数据库中一张表的结构做一次调整,添加了几个字段,后面对之前的数据进行刷新,刷新的内容是:对其中的一个已有字段url进行匹配,然后更新新加的 ...

  2. css3 input边框蓝光特效

    1.style样式 <style type="text/css"> .demok3_input { transition: all 0.30s ease-in-out; ...

  3. dos 固定ip命令

    dos 固定ip命令 ***************************************************************************************** ...

  4. 初识Docker和Windows Server容器

    概览 伴随着Windows Server 2016 Technical Preview 3 (TP3)版本的发布,微软首次提供了Windows平台下地原生容器.它集成了Docker对Windows S ...

  5. matlab 有趣小细节

    图像的默认显示方式,坐标从1开始计数.是从左向右,从上到下为正,分别为x和y轴          如果加入x轴和y轴画成成的格子,起始位置并不是严格的左上角,而是像素的中心点,并不是以像素的边缘画格子 ...

  6. log4net各种Filter使用【转】

    log4net各种Filter使用[转] log4net里面的filter类常用的为:      1.DenyAllFilter         拒绝所用的日志输出         <filte ...

  7. Hbase过滤器Filter的使用心得(爬坑经验)

    Hbase 的过滤器是个好东西.. 给这种非关系型数据库本来不能复杂查询的情况得到了很好的扩展..提供了很多的帮助.. 但是Filter的种类何其之多..让人眼花缭乱.. 譬如..分页类型的PageF ...

  8. 关于 Word Splitting 和 IFS 的三个细节

    在 Bash manual 里叫 Word Splitting,在 Posix 规范里叫 Field Splitting,这两者指的是同一个东西,我把它翻译成“分词”,下面我就说三点很多人都忽略掉(或 ...

  9. [Search Engine] 搜索引擎技术之倒排索引

    倒排索引是搜索引擎中最为核心的一项技术之一,可以说是搜索引擎的基石.可以说正是有了倒排索引技术,搜索引擎才能有效率的进行数据库查找.删除等操作. 1. 倒排索引的思想 倒排索引源于实际应用中需要根据属 ...

  10. C和指针 第七章 函数递归与迭代

    C语言通过运行时堆栈支持递归函数的实现,递归函数时直接或者间接调用自身的函数,经常有人拿斐波那契实现当做递归的实现,然后这样做效率并不高. n < 1;  Fib(1) =1 n = 2;  F ...