一、前言

　　说实话，听到BFC这个概念我心里一阵咯噔，这到底是什么？有种似曾相识的感觉，但是又很模糊。问了一下度娘，看到张鑫旭的《CSS深入理解流体特性和BFC特性下多栏自适应布局》。呀，原来是这东东啊。BFC应该是前端的基础知识，也许很多前端er工作中经常用到，但是未必真的归纳总结过（自己躺枪），反正能完成工作就好了，没必要非得脑海中有BFC这概念。不过我觉得，知识掌握一定的知识之后终究应该要善于总结，归纳成为体系，最后才能回归本真，站在一定的高度去看待一个问题。

　  说点题外话，学前端的应该或多或少都知道张老师，不知道肯定也看过他的技术博客，他的博客写的有趣又让人能get到知识点，号称一个把css玩得很6的男人。我觉得他之所以能得到业界的认可，和他善于总结归纳知识，刨根究底的态度分不开的，从他每一篇博文中就可以看出来。话说上次在《腾讯web前端大会》看到他本人，嗯，确实比照片上帅很多。

二、言归正传

先看一个例子，相信大家都用过。经典的两栏布局方法。

方法很多，下面是其中一种:

<style>

    body {

        width: 300px;

        position: relative;

    }

    .left{

        width: 100px;

        height: 150px;

        float: left;

        background: red;

    }

    .right{

        height: 200px;

        background: green;

        overflow: hidden;

    }

</style>

<body>

    <div class="left"></div>

    <div class="right"></div>

</body>

说明：left不会浮动在right上面，主要是因为right样式中添加了overflow:hidden，这方法我也用过，但是也没想那么多，就知道添加overflow:hidden能撑起来仅此而已；

三、开始

1、概念

　　CSS布局时，我们常常需要确定一个元素时block类型的块元素还是inline类型的内联元素。FC、BFC这些概念就和这些元素类型相关。FC：Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

2、BFC生成

　　① float的值不为none。
　　② overflow的值为auto,scroll或hidden。
　　③ display的值为table-cell, table-caption, inline-block中的任何一个。
　　④ position的值为absolute或fixed

3、BFC约束规则：

　　1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠，同属一个BFC的两个相邻Box的margin会发生重叠。

　　2.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界接触，即使浮动元素也是如此（除非这个子元素自身也是一个浮动元素）。

　　3.BFC的区域不会与float的元素区域重叠。

　　4.计算BFC高度时，浮动元素也参与计算。

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

我们在写css常见的一些问题都可以由上面两条推出，例如：

　　1.Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。

　　2.竖直方向上有的Block元素margin会重叠，水平方向不会。

　　3.浮动元素会尽量接近左上方或右上方。

　　4.为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。

4、应用

上面知道了BFC的约束规则之后，我们可以利用（触发）它来做点事情；

　　1、防止margin重叠，

2、清除内部浮动

　　3、自适应多栏布局

布局中的BFC---重点是前言的更多相关文章

  1. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  2. css布局中的BFC

    1.BFC的区域会与float的元素区域重叠 2.计算BFC的高度时,浮动子元素也参与计算 3.BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素 4.BFC意为" ...

  3. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  4. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  5. BFC？来自CSS中的BFC

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...

  6. Android布局中的空格以及占一个汉字宽度的空格的实现

    在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格:  窄空格:  一个汉字宽度的空格:   [用两个空格(  )占一个汉字的宽度时,两个空格比 ...

  7. Android布局中的空格以及占一个汉字宽度的空格，实现不同汉字字数对齐

    前言 在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格: (普通的英文半角空格但不换行) 窄空格:  　(中文全角空格 (一个中文宽度))   ...

  8. 聊聊Flexbox布局中的flex的演算法

    到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...

  9. Flutter Stack布局中定位的方式

    前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...

随机推荐

  1. 关于CentOS下 yum包下载下的rpm包放置路径

    在CentOS下用yum安装,回发现在/var/cache/yum/下的base.extrs和updates下的packages下都没有发现下载的RPM 原来在/etc/yum.conf下没有设置下载 ...

  2. 使用UTL_HTTP时遭遇ORA-29273

    http://blog.itpub.net/8520577/viewspace-1295182/ 项目中需要使用utl_http访问webserivce.使用utl_http时报错ORA-29273. ...

  3. 识别同音字词pypinyin, 分词 jieba

    一.pypinyin 在处理语音输入指令时, 比如 请给圆圆发消息,那么转化为文字识别时, 无法确定转换的是圆圆还是园园或是源源, 为了解决这个问题, 就把指令转换为拼音来处理,这样就可以处理同音字了 ...

  4. 网易免费企业邮箱Foxmail设置方法

    网易免费企业邮箱Foxmail7.0设置方法 第一步:启动 Foxmail 邮件客户端,点击工具->账号管理,弹出如下页面. 点击新建,如下: 填写自己企业邮箱账号,然后下一步,邮箱类型选择PO ...

  5. Swift5 语言参考(三) 类型

    在Swift中,有两种类型:命名类型和复合类型.一个名为类型是当它的定义可以给出一个特定名称的类型.命名类型包括类,结构,枚举和协议.例如,名为的用户定义类的实例MyClass具有该类型MyClass ...

  6. 一文搞懂Java环境,轻松实现Hello World!

    在上篇文章中,我们介绍了Java自学大概的路线.然而纸上得来终觉浅,今天我们教大家写第一个java demo.(ps:什么是demo?Demo的中文含意为“示范",Demo源码可以理解为某种 ...

  7. CSS3盒子模型(上)

    CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...

  8. cStringIO 实现指定大小的字符串缓存

    StringIO经常被用来作为字符串的缓存,以下实现无论写入多少字符串,总能返回一个指定大小的缓存 from cStringIO import StringIO class CustomStringI ...

  9. spring boot 中使用swagger 来自动生成接口文档

    1.依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  10. javascript数据结构与算法---二叉树（删除节点）

    javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...