介绍BFC的博文有很多,下面,我就从另一个角度解释一下“在什么情况下会使用BFC”

以下仅代表我的个人看法,如果有错误的地方,还希望大家能告诉我,以免我在错误的道路上越走越远。

一、BFC是什么

Block Formatting Context 块元素 格式 上下文,他是一种特定触发条件下的规则。Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

规则如下:

float的值不为none。

overflow的值不为visible。

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

position的值不为relative和static。

二、什么情况下用BFC

观察BFC的几种触发方式。我们可以看出:这几种触发条件,表面上都是一些自身属性的设置,但是这几个属性都会带来“副作用”(比如:改变文档的流式布局;块级元素的自适应性;)简单的说:就是这几个副作用就是--后效性,

我们为了屏蔽这种副作用,就要触发BFC,通过BFC将副作用的影响范围控制住 。当我们为了局部效果将子元素和父元素中的一个使用了上面的触发条件。必然会引起属性效果的“向后非期望蔓延”BFC就是针对这几个属性的补救措施。但是之所以没有默认触发,可能是考虑到副作用可能是期望的效果,即选择的权利交给了开发人员。因此上我们是为了BFC效果,才触发了条件。而实际上是因为局部使用了有后效性的属性,我们才用BFC的规则将布局回归到正常。 以我的理解BFC可以翻译为“盒模型布局异常修正系统”。

在什么情况下采用BFC的更多相关文章

  1. QString内部仍采用UTF-16存储数据且不会改变(一共10种不同情况下的编码)

    出处:https://blog.qt.io/cn/2012/05/16/source-code-must-be-utf-8-and-qstring-wants-it/ 但是注意,这只是QT运行(Run ...

  2. 如何解决结果由block返回情况下的同步问题(转)

    开发中经常会遇到一种简单的同步问题: 系统在获取资源时,采用了block写法,外部逻辑需要的结果是在block回调中返回的 举个例子: 请求获取通讯录权限的系统弹窗 调用系统方法请求通讯录权限: AB ...

  3. Android热修复技术选型(不在市场发布新版本的情况下,直接更新app)

    2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...

  4. Sql Server优化之索引提示----我们为什么需要查询提示,Sql Server默认情况下优化策略选择的不足

    环境: Sql Server2012 SP3企业版,Windows Server2008 标准版 问题由来: 最近在做DB优化的时候,发现一个存储过程有非常严重的性能问题, 由于整个SP整体逻辑是一个 ...

  5. Java之HashMap在多线程情况下导致死循环的问题

    PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象   当初学Java的时候只是知道HashMap<K,V& ...

  6. 在不格式化原有系统盘的情况下,利用grub4dos+firadisk制作RamOS VHD Win7总结

    在不格式化原有系统盘的情况下,利用grub4dos+firadisk制作RamOS VHD Win7总结在不格式化原有系统盘的情况下,用grub4dos+firadisk安装WIN7到VHD,内存大的 ...

  7. HBase在单Column和多Column情况下批量Put的性能对比分析

    作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2013/11/28/hba ...

  8. oracle数据库什么情况下创建索引比较好

    索引就好象一本字典的目录.凭借字典的目录,我们可以非常迅速的找到我们所需要的条目.数据库也是如此.凭借Oracle数据库的索引,相关语句可以迅速的定位记录的位置,而不必去定位整个表. 虽 然说,在表中 ...

  9. Reactjs相比较原生方案是绝对的快吗?哪些情况下React有优势

    作者:尤雨溪链接:http://www.zhihu.com/question/31809713/answer/53544875来源:知乎著作权归作者所有,转载请联系作者获得授权.   1. 原生 DO ...

随机推荐

  1. eclipse_project

    转!java web项目 build path 导入jar包,tomcat启动报错 找不到该类 在eclipse集成tomcat开发java web项目时,引入的外部jar包,编译通过,但启动tomc ...

  2. auto uninstaller 简体中文版 更新下载地址

    地址一(腾讯微云) 地址二(百度网盘)    提取码:3nx7 地址三(直接下载)

  3. [转]href="#"与javascript:void(0)的区别

    本文转自:http://www.cnblogs.com/suizhikuo/p/3928411.html 如果我们想把a标签中的链接置成空链接,我们一般会用两种方法: 1 <a href=&qu ...

  4. Murano Weekly Meeting 2016.05.31

    Meeting time: 2016.May.31 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...

  5. 用javascript实现禁止页面后退返回上一页的代码

    用javascript实现禁止页面后退返回上一页的代码:  有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法:  在需要跳转的页 ...

  6. 解决dede图集上传图片时跳出302错误

    错误.以前从来没遇到过,想了半天也没想出是哪里出了错误,郁闷~ 没辙,去论坛搜了一下,还真有同命相连的兄弟,同样爆出这个错误.往下拉了几楼,还是找到了答案. 解决办法是: 在include/userl ...

  7. Oracle之RMAN备份及还原

    RMAN可以进行增量备份:数据库,表空间,数据文件 只有使用过的block可以被备份成backup set 表空间与数据文件对应关系:dba_data_files / v$datafile_heade ...

  8. Qt 日志输出

    Qt学习(3)日志输出 普通的打印输出 用 QtCreator 开发 Qt 程序时, 经常需要向控制台打印一些参数.有时候是查看对象的属性是否被正确设置,有时候是查看程序是否执行了某一段代码,或者执行 ...

  9. 参数化拼接in查询条件,个人备份

    /// <summary>        /// 查询数据报表        /// </summary>        /// <param name="Tr ...

  10. Spring课程 Spring入门篇 4-1 Spring bean装配(下)之bean定义及作用域注解实现

    课程链接: 1 概述 2 代码演练 3 代码解析 1 概述 1.1 bean注解相关 a context:component-scan标签使用 问:该标签的作用是什么? 答:该标签作用是支持注解,在x ...