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会发生重叠

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时,浮动元素也参与计算

3、哪些元素会生成BFC:

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

1、haslayout:

‘Layout’ 是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。。

当一个元素的 ‘hasLayout’ 属性值为 true 时,我们说这个元素拥有了一个布局(layout),即成功触发hasLayout

     默认拥有布局的元素:

<html>, <body>

<table>, <tr>, <th>, <td>

<img>

<hr>

<input>, <button>, <select>, <textarea>, <fieldset>, <legend>

<iframe>, <embed>, <object>, <applet>

<marquee>

可触发 hasLayout 的 CSS 特性:

display: inline-block         /*ALL*/

height: (除 auto 外任何值)  /*仅适用IE6 7*/

width: (除 auto 外任何值)   /*仅适用IE6 7*/

float: (left 或 right)       /*ALL*/

position: absolute           /*ALL*/

writing-mode: tb-rl          /*ALL*/

zoom: (除 normal 外任意值)  /*仅适用IE6 7*/

IE7 还有一些额外的属性(不完全列表)可以触发hasLayout :

min-height: (任意值)/*以下适用IE7+*/

min-width: (任意值)

max-height: (除 none 外任意值)

max-width: (除 none 外任意值)

overflow: (除 visible 外任意值,仅用于块级元素)

overflow-x: (除 visible 外任意值,仅用于块级元素)

overflow-y: (除 visible 外任意值,仅用于块级元素)

position: fixed

总结:

1、Layout是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。

2、BFC就是一个不让内部元素与外界相互影响包容浮动子元素并自身和外界的浮动盒子不重叠的盒子

3、Tips:我们有时会用overflow:hidden的方法去清除浮动,就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)

 4、 IE有它自己的hasLayout属性,那么非IE浏览器呢?非IE浏览器采用的就是BFC(块格式化上下文)

5.haslayout的原理 IE 浏览器中,触发 hasLayout 的元素在进行高度计算的时候,其浮动的子元素也会参与运算。

时间: 2024-10-04 07:41:58

BFC与HasLayout的理解的相关文章

BFC和haslayout

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

关于BFC与haslayout

BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 浮动.绝对定位元素,不是块框的块容器(inline-block, table-cell, and table-caption),以及设置了overflow属性(除了visible)的块框,它们会为它们的内容形成新的 block formatting contexts (BFC). 在一个BFC中,框一个接一个的排列.垂直方向上

谈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

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

浅谈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——上下文:其实我自己理解的就是提供参照,那

关于bfc和haslayout

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