介绍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可以翻译为“盒模型布局异常修正系统”。

最新文章

  1. 如何挂载阿里云Linux服务器的“数据盘”(新购买)
  2. HashSet中实现不插入重复的元素
  3. How to use “svn add” recursively in Linux shell?
  4. Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例
  5. Redis入门(优势,环境,字符串,哈希,列表)
  6. O(1)时间删除链表的已知结点
  7. linux下安装软件后的环境变量设置
  8. JavaScript HTML DOM - 改变CSS
  9. 关于tcc、tlink的编译链接机制的研究
  10. Maven第一篇【介绍、安装、结构目录】
  11. sqoop实现关系型数据库与hadoop之间的数据传递-import篇
  12. Linux 定时任务不生效的问题
  13. 安装JDK出现错误:-bash: /usr/java/jdk1.7.0_71/bin/java: /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory解决办法
  14. GSM与GPRS的区别
  15. Git .gitignore文件简介及使用
  16. Choosing web framework: ASP.NET MVC vs Django Python vs Ruby on Rails(转载)
  17. Chrome 调试技巧: 调整网速
  18. zookeeper集群的搭建(三台相同)
  19. LINUX内核分析第六周学习总结——进程的描述和进程的创建
  20. Swiper-轮播图。

热门文章

  1. C# 反射(Reflection)
  2. 配置wordpress
  3. Kafka monitoring监控
  4. layui upload封装
  5. 在Java中VO , PO , BO , QO, DAO ,POJO是什么意思
  6. 关于EasyUI datagrid 表头居中 数据列内容居右 或者居左
  7. windows常用命令行总结
  8. JAVA避免入坑必备
  9. 用IDEA创建一个SpringBoot项目
  10. 服务器返回的14种常见HTTP状态码