关于BFC与haslayout

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

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

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

浮动、绝对定位元素,不是块框的块容器(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同时搞定两者。若只触发(形成)了其中一个,也最好同时触发(形成)另一个,以保证浏览器的兼容。

时间: 2024-10-12 21:40:04

关于BFC与haslayout的相关文章

BFC和haslayout

haslayout 的概念 haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false.当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout). 要想更好的理解 css, 尤其是 IE 下对 c

谈BFC和haslayout

今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布局经常用到的有浮动.定位,当然也需要知道盒子模型,这里的盒子模型不是说就是内边距.外边距.边框等,他们只是其中的一种. 盒子模型总共有5个:1) BFC:2) haslayout:3) 元素盒 :4) EM盒 :5) 行盒 BFC: 含义:顾名思义就是Block Formatting Context

BFC and Haslayout

一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC float的值不为none. overflow的值不为visible. display的值为table-cell, table-caption, inline-block中的任何一个. position的值不为relative和static. 2.BFC的作用 不和浮动元素重叠 如果一个浮动元素后面跟着一

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

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的

BFC与HasLayout的理解

1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的mar

什么是BFC,haslayout

BFC(Block Formatting Context)意思为“块级格式化范围” 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的.这里有点类似一个BFC就是

BFC、haslayout

BFC(block块,f格式化,c上下文content )译为"块级格式化上下文" 它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC. 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell.table-caption position的值为absolut

浅谈BFC和haslayout

一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 其一般表现规则,我整理了以下这几个情况: 1.在创建了 Block Formatting Context 的元素中,其子元素按文档流一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性. 根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象.也就

BFC与haslayout

前几天学习的时候看到了BFC这个词,好奇之余在网上查了相关文章,终于搞明白了BCF到底是什么东西.发现自己布局时早已使用过其特性解决问题,只是不知道这个具体概念以及内在原理.下面就谈谈我对BFC的理解吧. BFC是(Block Formatting Context)的缩写,中文翻译过来是块格式化上下文,是W3C CSS 2.1 规范中的一个概念,在CSS3中,BFC  叫做  Flow Root.其实从其字面意思上我们已经可以看出些端倪:context——上下文:其实我自己理解的就是提供参照,那