最近对一些基础知识进行了整理,下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。

1. 首先,什么是 BFC 呢?

BFC,Block formatting context,直译为“块级格式化上下文”。

**在说 BFC 之前,我们首先要弄懂什么是 formatting context? **

fomating context:格式化上下文,是W3C CSS2.1规范中的一个概念,拥有一套渲染规则。对内来约束其内块级元素的布局,对外来控制和外部元素的布局。通俗一点的讲,它就是页面中的一块渲染区域,规定了其子元素将如何定位,以及和其他元素的关系和相互作用。

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

CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC(GridLayout Formatting Contexts,直译为"网格布局格式化上下文")和FFC(Flex Formatting Contexts,直译为"自适应格式化上下文")。IFC、GFC、FFC 在这里就不进行详细解释了。

既然有四种渲染规则,那么我们就需要知道在什么情况下会采用哪种渲染规则,box 作为 css 布局的对象和基本单位,它的类型,由其元素的类型和 display 属性决定。不同类型的 box,会参与不同的 fomating context(一个决定如何渲染文档的容器),以不同的方式渲染。那么,都有哪些类型的盒子呢?

① block-level box : display属性为block, list-item, table的元素,会生成block-level box,参与BFC。

② inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box,参与IFC。

③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。(CSS3)

block:块级元素,默认不加修饰的情况下块级元素并不会被收缩包裹其内容,其宽会充斥父元素,高度由自身内容撑开(inline 行内元素会“收缩包裹” 其内容,并且会尽可能包紧)。每个块级元素即使设置了宽度,不占满父元素也会自己占据一行,不让其后元素与自己并行。

说了这么多,我们回到正题:

BFC 就是一个独立的渲染区域,规定了Block-level内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

通俗一点的讲, BFC 就是相当于一个把浮动元素框起来并隔离的容器,容器里面的子容器不会影响到外面的元素,使浮动不会溢出。

2. BFC 布局规则

  1. 内部的 box 会在垂直方向,一个接一个的放置。
  2. 每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动,也是如此。
  3. BFC 的区域不会与float box 重叠。
  4. BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此。
  5. 计算 BFC 的高度时,浮动元素也参与计算

3. 哪些元素会生成 BFC ?

  1. 根元素
  2. float 的值不为 none
  3. overflow 的值不为 visible
  4. display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
  5. position 的值为 absolute、fixed

4. BFC 的作用及原理

(1) 自适应两栏布局

代码:

     body {
position: relative;
}
.aside {
width: 300px;
height: 200px;
float: left;
background: #f66;
} .main {
height: 250px;
background: #fcc;
overflow: hidden; /* 通过触发main生成BFC, 来实现自适应两栏布局,BFC的区域不会与float box重叠 */
}
	  <div class="aside"></div>
<div class="main"></div>
(2) 清除内部浮动

代码:

     .par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden; /* 触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算 */
} .child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
	 <div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
(3) 防止垂直 margin 重叠

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

代码:

    /* 若没有 .wrap ,会发生 margin 重叠,两个p上下之间的距离为30px */
/* 在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。 */
.wrap {
overflow: hidden; /* 防止垂直margin重叠 */
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
     <p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>

总结

因为 BFC 内部的元素和外部的元素绝对不会互相影响,因此,当 BFC 外部存在浮动时,它不应该影响 BFC 内部的 Box 的布局,BFC 会通过变窄而不与浮动有所重叠。同理,当 BFC 内部存在浮动时,为了不影响外部元素的布局,BFC 计算高度时会包括浮动的高度,也因此,避免了 margin 重叠的产生。

想看以上例子的网页实现效果,请点这里

本文链接:http://www.cnblogs.com/xsilence/p/5690093.html

BFC 小结的更多相关文章

  1. 清除浮动clear/BFC

    浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level ...

  2. CSS 小结笔记之BFC

    BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...

  3. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  4. 由外边距合并到BFC

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  5. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  6. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  7. 盒子模型、IFC、BFC和Collapsing margins

    前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...

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

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

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. Sublime Text 3汉化中文版

    Sublime Text 3汉化中文版是Sublime Text2的升级版.Sublime Text 是一款流行的文本编辑器软件,有点类似于TextMate,跨平台,可运行在Linux,Windows ...

  2. 设置时间 new Date

    1.标准格式下的时间是object ,操作时可以通过 var cDate=new Date(startTime.getTime());来复制当前日期避免操作给初始日期带来影响 2. 以月为单位计算想要 ...

  3. js的一些坑,持续增加,学习js应该注意的问题

    大家来补充 1.变量类型模糊,容易出现问题; var a='1',b=1; a==b; //true a===b; //false 2.全局变量与函数内部变量同名时,在函数内部声明变量,声明位置虽然在 ...

  4. Android提交数据到JavaWeb服务器实现登录

    之前学习Android提交数据到php服务器没有成功,在看了两三个星期的视频之后,现在终于实现了与服务器的交互.虽然完成的不是PHP端的,但是在这个过程还是学到了不少东西的.现在我先来展示一下我的成果 ...

  5. CoreLocation 定位

    前言: 本章会使用OC和Swift分别进行实现,需要了解Swift的小伙伴可以翻一下之前的博文 LBS和SoloMo(索罗门) LBS:基于位置的服务,根据定位展示周边美食.景点等信息(全称:Loca ...

  6. [转 载] android 谷歌 新控件(约束控件 )ConstraintLayout 扁平化布局

    序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库. 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件 ...

  7. 列式存储(二)JFinal如何处理从前台传回来的二维数组

    上一篇说到了列式存储,这一篇说它的存储问题,将每个模块的所有属性字段单独存到一张表中,新增页面时,所有的字段都去数据库请求,这样多个模块的新增功能可以共用一个jsp.由于每个模块的字段个数不一样,有的 ...

  8. 一个统计报表sql问题

    今天朋友问我了一个统计报表的sql问题.我弄了好久.终于算是写出来了.这里记录下. 问题:  id--------------name--------------addtime1            ...

  9. 计算机网络和Internet之核心网络

    1.网状的路由器 路由器的链接组成了网络的核心. 任何一个路由器,或者某条线路挂掉,但是网络还是通的,这是internet的一个特性. data到底是怎么传输的? 1)circuit switchin ...

  10. android Gui系统之SurfaceFlinger(1)---SurfaceFlinger概论

    GUI 是任何系统都很重要的一块. android GUI大体分为4大块. 1)SurfaceFlinger 2)WMS 3)View机制 4)InputMethod 这块内容非常之多,但是理解后,可 ...