介绍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. 转换Excel格式

    做一个功能需要将excel2003格式转成2007的格式,代码如下 需要引用office的microsoft.office.interop.excel.dll var app = new Micros ...

  2. python 获取当前时间及前一天时间

    import datetime from pandas.tseries.offsets import Day now_time =datetime.datetime.now()#获取当前时间 yes_ ...

  3. 获取项目路径js

    var curWwwPath=window.document.location.href;           //获取主机地址之后的目录,如: myproj/view/my.jsp          ...

  4. Engineer Assignment HDU - 6006 状压dp

    http://acm.split.hdu.edu.cn/showproblem.php?pid=6006 比赛的时候写了一个暴力,存暴力,过了,还46ms 那个暴力的思路是,预处理can[i][j]表 ...

  5. inventor安装不了

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  6. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  7. jdk安装完为什么会有两个JRE?

    jdk安装完为什么会有两个JRE? 之所以需要两套 jre ,是因为可以分担工作:当用户只需要执行 java 的程序时,那么 c:\program files\java\jre 下的 jre 就 ok ...

  8. JAVA SE collection接口

    collection接口:{Set,List,Queue} Set:无序集合,元素不可重复          List:有序集合,元素可重复          Queue:队列 Set{EnumSet ...

  9. 网站架构:消息队列 Java后端架构

    2017-01-13  一.消息队列概述 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构.是大型分布式系统不可缺少的中间 ...

  10. Spring课程 Spring入门篇 3-1 Spring bean装配(上)之bean的配置项及作用域

    课程链接: 本节主要讲了四大块 1 bean的作用域 2 bean作用域代码演练 3 单例 多例应用场景 4 bean的配置项(不重要) 1 bean的作用域 1.1 singleton :单例 1. ...