BFC与hasLayout都是CSS布局上的概念。

几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解。

hasLayout则是IE6、7产生许多bug的根源。

一、BFC

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

翻译过来就是:

浮动、绝对定位元素,不是块框的块容器(inline-block, table-cell, and table-caption),以及设置了overflow属性(除了visible)的块框,它们会为它们的内容形成新的block formatting contexts(BFC)。

在一个BFC中,框一个接一个的排列。垂直方向上,框的起点是一个包含块的顶部。两个同级框的垂直距离由margin决定,垂直方向毗邻的块级框的margin会发生折叠。

在一个BFC中,每个框的左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是这样(尽管一个框的内容区域会由于浮动而收缩),除非这个框形成了一个新的BFC(这种情况下,框本身由于浮动变得更窄)。

在这里不翻译BFC具体中文怎么读,有翻译成“块级格式化上下文”,想想觉得很别扭。我的理解是,一个BFC提供了一个方形区域,它包裹里面的块框与行内框,决定它们的布局。

形成BFC的方法:

  • float:left|right
  • position:absolute|fixed
  • display:inline-block|table-cell|table-caption
  • overflow:hidden|auto|scroll

BFC的作用:

  • 情况1:

解决办法(外边距折叠有很多解决办法)之一是为外面的黑色框添加overflow:hidden,使之形成一个BFC。

  • 情况2:

解决办法是让未浮动元素形成一个BFC,使之不与浮动元素堆叠。

  • 情况3:形成BFC的元素可以清除它内部的浮动,使得高度不“塌陷”。

二、hasLayout

hasLayout是IE下的一个专有概念(属性),它决定一个元素是否拥有一个布局。它并不是一个CSS属性,所以不能显示的对它设置true或false。一个拥有布局的元素负责它自己及其子元素的尺寸和定位,没有布局的元素由其拥有布局的祖先元素负责。当一个元素拥有布局时,就称它has layout(hasLayout为true)。hasLayout在IE8标准模式中被移除。

hasLayout的作用可以减少IE显示引擎的处理开销。在理想情况下,所有的元素都可以负责自己的尺寸和定位,但这在早期版本的IE中会产生很大的性能问题,所以IE只对一部分元素设置hasLayout。

默认拥有布局的元素有:

html,body,table,tr,th,td,iframe,object, applet,img,hr,input,button,select,textarea,fieldset,legend等。

设置以下属性会使一个元素拥有布局:

  • position:absolute
  • float:left or right
  • display:inline-block
  • width:any value other than auto
  • height:any value other than auto
  • zoom:any value other than normal
  • writing-mode:tb-rl

IE7还可以通过一下属性设置hasLayout:

  • overflow:hidden or scroll or auto
  • overflow-x:hidden or scroll or auto
  • overflow-y:hidden or scroll or auto
  • min-width:any value other than auto
  • max-width:any value other than auto
  • min-height:any value other than auto
  • max-height:any value other than auto

hasLayout有点类似于BFC,比如在上文BFC中的情景都可以在IE6、7用触发hasLayout的方法解决。IE6、7的很多布局产生的bug(如3px间隙、绝对定位的继承宽度)都可以通过触发hasLayout修复,比较推荐的方法为zoom:1与height:1%,不会破坏已有的样式。

设置有些属性(如float、position、display)会同时形成BFC与触发hasLayout,或者在>=IE7时可以设置overflow同时搞定两者。若只触发(形成)了其中一个,也最好同时触发(形成)另一个,以保证浏览器的兼容。

BFC与hasLayout的更多相关文章

  1. 谈BFC和haslayout

    今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布 ...

  2. BFC and Haslayout

    一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...

  3. 文本溢出、垂直外边距合并、BFC、hasLayout

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  4. BFC和haslayout

    待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...

  5. BFC与hasLayout之间的故事

    刚拒绝了一个很有诱惑的公司,不是不想去,而是对现在的能力还不确定,希望能够进一步提高自己的技能,所有想写博客了,监督自己的学习进度·········现在还没有开放博客,希望成熟一些后再开放吧! 进入正 ...

  6. CSS的BFC和hasLayout及其应用场景

    前端精选文摘:BFC 神奇背后的原理 一.BFC是什么? 先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观 ...

  7. BFC和haslayout(IE6-7)(待总结。。。)

    支持BFC的浏览器(IE8+,firefox,chrome,safari) Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改 ...

  8. BFC 和 haslayout

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

  9. BFC与HasLayout的理解

    1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域 ...

随机推荐

  1. redis+cookie+json+filter实现单点登录

    目录: 1.项目集成redis客户端jedis 引入Jedis pom 2.redis连接池构建及调试 1)JedisPoolConfig源码解析 2)JedisPool源码解析 3)JedisPoo ...

  2. ftp,nfs和samba的区别

    先从名字上进行理解: 1. FTP(文件传输协议) 2. NFS(网络文件系统) 3. samba 即smb(服务信息块)协议 1 其中FTP 是TCP/IP协议栈所提供的一种子协议,该子协议具体可以 ...

  3. docker swarm join 报错

    [peter@minion ~]$ docker swarm join --token SWMTKN-1-3mj5po3c7o04le7quhkdhz6pm9b8ziv3qe0u7hx0hrgxsna ...

  4. python RSA加密解密及模拟登录cnblog

    1.公开密钥加密 又称非对称加密,需要一对密钥,一个是私人密钥,另一个则是公开密钥.公钥加密的只能私钥解密,用于加密客户上传数据.私钥加密的数据,公钥可以解密,主要用于数字签名.详细介绍可参见维基百科 ...

  5. ios app应用在显示屏幕上改中文名

    1.点击项目名 2.选Build settings 搜索 product name 3.双击,改为需要在手机上显示的应用名

  6. csu 1757(贪心或者树状数组)

    1757: 火车入站 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 209  Solved: 51[Submit][Status][Web Board] ...

  7. 【hdoj_1042】N!(大数)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1042 题目说明待求阶乘的数最大为10000,而10000!的位数为35660(这个数是上网查的),所以已经 ...

  8. JS函数学习

    =============数学函数========== 1.Math.random()为取随机数0~1之间的:0可以取到,1取不到 alert(Math.random()); 2.Math.PI为3. ...

  9. loadrunner脚本编写http协议

  10. overflow:scroll 在 iOS上滚动不流畅的问题

    添加下面属性: -webkit-overflow-scrolling: touch;