在什么情况下采用BFC
介绍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的更多相关文章
- QString内部仍采用UTF-16存储数据且不会改变(一共10种不同情况下的编码)
		
出处:https://blog.qt.io/cn/2012/05/16/source-code-must-be-utf-8-and-qstring-wants-it/ 但是注意,这只是QT运行(Run ...
 - 如何解决结果由block返回情况下的同步问题(转)
		
开发中经常会遇到一种简单的同步问题: 系统在获取资源时,采用了block写法,外部逻辑需要的结果是在block回调中返回的 举个例子: 请求获取通讯录权限的系统弹窗 调用系统方法请求通讯录权限: AB ...
 - Android热修复技术选型(不在市场发布新版本的情况下,直接更新app)
		
2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...
 - Sql Server优化之索引提示----我们为什么需要查询提示,Sql Server默认情况下优化策略选择的不足
		
环境: Sql Server2012 SP3企业版,Windows Server2008 标准版 问题由来: 最近在做DB优化的时候,发现一个存储过程有非常严重的性能问题, 由于整个SP整体逻辑是一个 ...
 - Java之HashMap在多线程情况下导致死循环的问题
		
PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象 当初学Java的时候只是知道HashMap<K,V& ...
 - 在不格式化原有系统盘的情况下,利用grub4dos+firadisk制作RamOS VHD Win7总结
		
在不格式化原有系统盘的情况下,利用grub4dos+firadisk制作RamOS VHD Win7总结在不格式化原有系统盘的情况下,用grub4dos+firadisk安装WIN7到VHD,内存大的 ...
 - HBase在单Column和多Column情况下批量Put的性能对比分析
		
作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2013/11/28/hba ...
 - oracle数据库什么情况下创建索引比较好
		
索引就好象一本字典的目录.凭借字典的目录,我们可以非常迅速的找到我们所需要的条目.数据库也是如此.凭借Oracle数据库的索引,相关语句可以迅速的定位记录的位置,而不必去定位整个表. 虽 然说,在表中 ...
 - Reactjs相比较原生方案是绝对的快吗?哪些情况下React有优势
		
作者:尤雨溪链接:http://www.zhihu.com/question/31809713/answer/53544875来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. 原生 DO ...
 
随机推荐
- python 之serial
			
一 先按照 pywin32:pywin32是一个非常强大的Python扩展库,是Python调用Windows系统底层功能的最佳接口,不安装这个按照pyserial也没有用 二 按装pyserial ...
 - Murano Weekly Meeting 2016.07.12
			
Meeting time: 2016.July.12 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1. ...
 - Aspose.Cells导入导出execl
			
插件:Aspose.Cells 没有安装office插件也能使用: 导出:不能使用ajax异步· /// <summary> /// 导出试题 /// </summary> / ...
 - ubuntu .net core The specified framework 'Microsoft.NETCore.App', version '1.0.1' was not found
			
想在ubuntu下试试.net core mvc,按照官方教程走完,然后把在window 下做好的项目想在ubuntu下试试,然后输入了 git clone https://github.com/ka ...
 - SSIS 错误代码 DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER
			
[OLE DB 源 [2]] 错误: SSIS 错误代码 DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER.对连接管理器“test.trade_sh ...
 - 关于“.WriteLine()是否需要这么多重载”的笔记
			
在Stack Overflow上看到一个较热门的问题,作笔记于此. Console.WriteLine()有以下如此多的重载: public static void WriteLine(string ...
 - 用IDEA创建一个SpringBoot项目
			
next后等待项目构建完成 运行方法一: 方法二:
 - 什么叫erp系统
			
一般来说,erp系统是一个以会计(此处的会计是指管理会计)为核心的信息系统,用来识别和规划企业资源, 从而获取客户订单, 完成加工和交付,最后得到客户付款,最终获得收入和利润. 实际上, erp 系统 ...
 - 在线图片转base64
			
function ImgToBase64(url, callback, outputFormat) { // outputFormat 用于指定输出格式的,遵循 MIME 标准 var canvas ...
 - 使用 Satis 搭建私有的 Composer 包仓库
			
简述 iBrand 产品立项时是商业性质的项目,但是在搭建架构时考虑后续的通用性,因此每个模块都设计成一个 Package,作为公司内部用,因此这些包并不能提交到 packagist.org 上去. ...