最近对一些基础知识进行了整理,下面是针对 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. 【特别推荐】几款极好的 JavaScript 下拉列表插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  2. BookBlock - 效果非常真实的书本翻页预览

    这个名为 BookBlock 的图片预览效果是一个书展示或网上书店的概念,已全屏打开3D页面导航网格的形式显示图书的详细信息.我们可以打开书预览的摘录,其中有一些细节的网格.对于图书预览,我们在使用 ...

  3. go语言 类型:基础类型和复合类型

    Go 语言中包括以下内置基础类型:布尔型:bool整型:int int64 int32 int16 int8 uint8(byte) uint16 uint32 uint64 uint浮点型:floa ...

  4. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  5. CRM 2013 自动发送报表

    Sql Server Report非常强大,导出不同格式的文档,比如work 或者excel都可以委托Reporting先做报表开发然后再在程序中调用生成指定格式的报表推送给用户,CRM也是集成了Re ...

  6. SharePoint2013的头像显示和读取

      前言 有个时候SP的二次开发,需要用代码获取头像显示,如SP基于AD验证,AD有头像属性,做为头像数据来源(因为Exchange和lync的头像也来自AD),说道这里大家都知道有2种办法,一种从A ...

  7. Autodesk 最新开发技术研讨会-北京-上海-武汉-成都-西安-PPT下载

    经过半月的奔波,转遍祖国大好河山.结论,还是喜欢成都,安逸~,好希望能在成都生活,竹林里品茶,不亦乐乎~ 如果你没能参加我们的研讨会,下面的PPT供参考: 面向世界.面向未来 – Autodesk 云 ...

  8. Web自动化测试 Selenium 2/3

    TesNG和Selenium集成使用 TestNG 是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔 离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整 个系统,例如运用 ...

  9. mac 下如何切换jdk的版本

    1.打开.bash_profile文件添加一个函数 #add a function for switch idk version.function jdkset() { if [ $# -ne 0 ] ...

  10. View的事件体系

    View的滑动 实现手段 优点 缺点 备注 scrollTo/scrollBy 使用简单 只能滑动view的内容,并不会滑动view本身. 且内容超出view本身的布局范围部分的不会显示 不适合有交互 ...