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. python并发编程之threading线程(一)

    进程是系统进行资源分配最小单元,线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.进程在执行过程中拥有独立的内存单元,而多个线程共享内存等资源. 系列文章 py ...

  2. linux编程之main()函数启动过程【转】

    转自:http://blog.csdn.net/gary_ygl/article/details/8506007 1 最简单的程序  1)编辑helloworld程序,$vim helloworld. ...

  3. (转)USB体系结构

    转载地址:http://blog.ednchina.com/zenhuateng/203584/Message.aspx USB总线接口层:物理连接.电气信号环境.信息包传输机制:主机一方由USB主控 ...

  4. ASP.NET Core 上传大文件无法接收的问题

    解决办法:在API项目中配置 1. 在 web.config 文件中 <system.webServer>里加入 <security> <requestFiltering ...

  5. 转:在CentOS 7.3使用yum安装 MySql5.6.24

    按照CentOS 6.5的方法在CentOS 7上安装会失败,需要按照下文进行安装. 1.安装rpm包 Linux系统自带的repo是不会自动更新每个软件的最新版本(基本都是比较靠后的稳定版),所以无 ...

  6. 运行级别(run level)

    inittab是很多linux版本的启动脚本.Linux在完成核内引导以后,就开始运行init程序,它的进程号是1,是所有其他进程的起点.init需要读取/etc/inittab,该文件告诉init在 ...

  7. csu 1801(合数分解+排列组合)

    1801: Mr. S’s Romance Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 15  Solved: 5[Submit][Status][W ...

  8. hdu 3573(数学+贪心)

    Buy Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. Effective STL 阅读笔记: Item 4 ~ 5: Call empty instead of checking size() against zero.

    Table of Contents 1 Item 4: Call empty instead of checking size() against zero 2 Item 5: Prefer rang ...

  10. Sublime Text 2.0.2,Build 2221注册码

    Help ->Enter License,输入如下序列号: ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855 ...