BFC是什么呢？

掏粪男孩？

当然不是咯。BFC，英文名Block formatting context，直译为“块级格式化上下文”。它是W3C CSS 2.1规范中的一个概念，决定了元素如何对内容进行定位，以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。

BFC(参考W3C)

特性

进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。

总之，BFC与外部元素互不影响

触发BFC的方法

1、  根元素

2、  float属性不为none

3、  position为absolute或fixed

4、  overflow的值不为visible

5、  display的值为table-cell，table-caption，inline-block中的任何一个。

谈了半天，你可能会问，咦，葛葛，那使元素成为BFC到底有么子用呢？

这就得，从它的特性入手，特别是我加粗的部分，可以知道，BFC元素可以防止与浮动元素重叠嘛。

恩？什么意思。看看下面的demo

<!DOCTYPE html>

    <head>

        <title>BFC</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

             .leftDiv {

                 width:100px;

                 height:100px;

                 background:green;

                 float:left;

             }

             .normalDiv {

                 height:100px;

                 background:pink;

             }

        </style>

    </head>

    <body>

        <div class="leftDiv"></div>

        <div class="normalDiv"></div>

    </body>

</html>

运行代码，打开chrome调试器，点击normalDiv元素，可以看到，normalDiv有一部分被floatDiv挡住了，即它们发生了重叠。

那么我们触发normalDiv为BFC呢。例如设置它的属性overflow为hidden，我们运行代码，再看看结果。

<!DOCTYPE html>

    <head>

        <title>BFC</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

             .leftDiv {

                 width:100px;

                 height:100px;

                 background:green;

                 float:left;

             }

             .normalDiv {

                 height:100px;

                 background:pink;

                 /*添加overflow:hidden*/

                 overflow:hidden;

             }

        </style>

    </head>

    <body>

        <div class="leftDiv"></div>

        <div class="normalDiv"></div>

    </body>

</html>

从运行结果可以看出，当我们触发normalDiv为BFC后，它与floatDiv就没有发生重叠啦。

好吧，咦，我也知道BFC的确可以防止与浮动元素重叠，那有什么用呢？

自适应布局！！！（下篇详讲）

从它的特性入手，我们还可以知道BFC可以阻止外边距重合。

我们都知道，块级元素垂直方向的margin是会重合，例如这样

<!DOCTYPE html>

    <head>

        <title>test_slice</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            .div1,.div2 {

                width:100px;

                height:100px;

                margin:20px;

            }

            .div1 {

                background:green;

            }

            .div2 {

                background:pink;

            }

        </style>

    </head>

    <body>

        <div class="div1"></div>

        <div class="div2"></div>

    </body>

</html>

从上面的运行结果（红色区域）可以知道，它们垂直方向的margin重叠了。

原因是因为，它们属于同一个BFC（根元素），外边距是会重叠滴。所以只要将它们其中一个属于另一个BFC，就可以啦。

代码和demo见下：

<!DOCTYPE html>

    <head>

        <title>BFC</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            .div1,.div2 {

                width:100px;

                height:100px;

                margin:20px;

            }

            .anotherBFC {

                display:table-cell;

            }

            .div1 {

                background:green;

            }

            .div2 {

                background:pink;

            }

        </style>

    </head>

    <body>

        <div class="anotherBFC">

            <div class="div1"></div>

        </div>

        <div class="div2"></div>

    </body>

</html>

运行代码，发现的确如此。

从它的特性入手，我们还可以知道BFC可以清楚浮动。以前我知道解决“塌陷”问题的方法中，可以在父元素中加入overflow:hidden，就可以使父元素将浮动元素包裹起来，且清楚浮动，但不知道原因，后来才知道原来它将父元素BFC了，所以在计算父元素高度时，将浮动元素计算在内，又由于BFC不影响外部元素，所以就清楚浮动咯。

这是没有将父元素BFC的运行效果图

<!DOCTYPE html>

    <head>

        <title>BFC</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            *{

                margin:0;

                padding:0;

            }

            ul {

                border:1px solid pink;

            }

            li {

                width:100px;

                height:100px;

                margin-left:10px;

                background:green;

                float:left;

                list-style-type:none;

            }

        </style>

    </head>

    <body>

        <ul>

            <li></li>

            <li></li>

        </ul>

    </body>

</html>

这是将父元素BFC后的运行效果图

<!DOCTYPE html>

    <head>

        <title>BFC</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            *{

                margin:0;

                padding:0;

            }

            ul {

                border:1px solid pink;

                /*添加overflow:hidden*/

                overflow:hidden;

            }

            li {

                width:100px;

                height:100px;

                margin-left:10px;

                background:green;

                float:left;

                list-style-type:none;

            }

        </style>

    </head>

    <body>

        <ul>

            <li></li>

            <li></li>

        </ul>

    </body>

</html>

哈，的确如此哦。

看来善于触发元素BFC，好处多多呀。

BFC之浅析篇的更多相关文章

  1. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  2. TGL站长关于常见问题的回复

    问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...

  3. C# 程序性能提升篇-1、装箱和拆箱，枚举的ToString浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆 ...

  4. Linux 设备模型浅析之 uevent 篇（2）

    Linux 设备模型浅析之 uevent 篇 本文属本人原创,欢迎转载,转载请注明出处.由于个人的见识和能力有限,不可能面 面俱到,也可能存在谬误,敬请网友指出,本人的邮箱是 yzq.seen@gma ...

  5. C# 程序性能提升篇-2、类型（字段类型、class和struct）的错误定义所影响性能浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的定义了错误的类型,从而发生了额外的性能消耗,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候 ...

  6. 2、转载一篇，浅析人脸检测之Haar分类器方法

    转载地址http://www.cnblogs.com/ello/archive/2012/04/28/2475419.html 浅析人脸检测之Haar分类器方法  [补充] 这是我时隔差不多两年后, ...

  7. String 源码浅析————终结篇

    写在前面 说说这几天看源码的感受吧,其实 jdk 中的源码设计是最值得进阶学习的地方.我们在对 api 较为熟悉之后,完全可以去尝试阅读一些 jdk 源码,打开 jdk 源码后,如果你英文能力稍微过得 ...

  8. BFC与合并 浅析

    BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...

  9. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

随机推荐

  1. HDU 2222 　AC自动机模板题

    1.HDU 2222 2.题意:给出n个单词,一个字串,求有多少个单词在字串里出现了.注意给出的单词可能会重复,重复的不计. 3.总结:入门题.在查询这里还是不太懂. #include<bits ...

  2. JNI和NDK编程

    Java JNI的本意是Java Native Interface(Java本地接口),它是为了方便Java调用C.C++等本地代码所封装的一层接口.通过Java JNI,用户可以调用C.C++所编写 ...

  3. linux下tomcat安装

    1.先安装jdk,我们这里用yum进行安装: yum -y install java-1.7.0-openjdk* 确定是否安装成功: java -version 如果显示jdk的版本信息,说明安装成 ...

  4. OpenSSL 1.0.2e 3 Dec 2015

    目录: 1,交叉编译openssl 2,win32  vc9 编译 openssl 1,交叉编译openssl [原]交叉编译openssl不修改Makefile的方法 http://blog.chi ...

  5. 深入浅出HTTP协议(WEB开发和面试必备)

    1. 基础概念篇   a.简介 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和 ...

  6. 关于C#调用非托管动态库方式的性能疑问

    最近的项目中,因为一些原因,需要C#调用非托管(这里为C++)的动态库.网上喜闻乐见的方式是采用静态(DllImport)方式进行调用.偶然在园子里看到可以用动态(LoadLibrary,GetPro ...

  7. python 使用__neg__和__iter__

    __neg__ python中 __neg__ 方法对应于 符号 - 可见 str 没有__neg__,定义 strnew 好吧,无法再简化了 __iter__ 看看 list 的 __iter__: ...

  8. 实验环境里新创建成功的web application却在浏览器中返回404错误

    刚刚翻笔记翻到一些刚学SharePoint时候解决的一些很2的初级问题,本来是有些挣扎该不该把它们记录到这个blog里的?因为担心这些很初级的文章会拉低这个blog的逼格,但是我的哥们善意的提醒了我一 ...

  9. Microsoft .NET Framework 4.0.3版下载

    适用于 Microsoft .NET Framework 4 的更新 4.0.3,其中包含一系列新增功能,用于满足高端客户的功能需求和重要 .NET Framework 方案的需求. http://w ...

  10. 常用[js,css,jquery,html]

    目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur   ...