介绍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. Jmeter录制pc脚本

    1.打开jmeter后可以看到左边窗口有个“测试计划”和“工作台”,右键“测试计划”,添加 Threads(Users) →线程组,再右键 线程组→添加 配置元件→Http请求默认值 Http请求默认 ...

  2. python编程零碎积累

    例行程序 def routine():     lastday = ''     while True:         day = datetime.datetime.now().strftime( ...

  3. Android中的时间格式的校验

    public class MainActivity extends Activity implements OnClickListener{ private Button btn1; private ...

  4. jeecg权限设置案例

    JEECG简单实例讲解权限控制 一.业务背景 某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 二.需求 1.角色分为:员工.经理两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评 ...

  5. CentOS下NFS服务器配置教程

    说明: NFS服务器: 操作系统:CentOS 5.5 IP:192.168.21.160 nfs网络文件服务器共享目录:/data/osyunwei 目录所有者:www(说明:www为nginx运行 ...

  6. 常见的25个顶级PHP模板引擎

    为了找到一个好的模板引擎,我在互联网上进行搜索,目前已经整理出了以下名单: SmartySmarty的特点是将模板编译成PHP脚本,然后执行这些脚本.很快,非常灵活. Heyes Template C ...

  7. Linux小工具:文件上传ftp服务器

    工作期间,每次将文件上传至ftp服务器时,均需要手工输入ip.用户名.密码等,因此,考虑编写脚本完成文件的上传任务.具体的脚本sync.sh如下: #!/bin/bash source ~/.bash ...

  8. 修改model,映射到表中

    1. 当使用EF code first创建数据表后,数据库中会自动创建一个名为:dbo.__MigrationHistory的系统数据表, 如果尚未启用数据库迁移功能,那么每次在应用程序运行时,都会对 ...

  9. sass文件转css时注释虽然支持中文,但是出现乱码的解决方法

    sass文件转css时注释虽然支持中文,但是出现乱码的解决方法 Scss 注释中文报错问题(windows系统, 已解决)找到ruby的安装目录,里面也有sass模块,类似这样样的路径:F:\Prog ...

  10. Visual Studio无法推送提交到Github的解决方法

    前言 当出现Visual Studio推送变更失败时,卸载系统中所有Git以及Visual Studio 的Git工具再重装即可 前情概要 今天由于要尝试使用RabbitMQ,所以打算先在本地做些小D ...