网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂.所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响. 基础知识 在讲hasLayout和BFC之前,先简单地过一下元素布局的一些基本知识. 元素本身的布局方式可以从display上表现出来 block,对应块级元素 inline,对应行内元素 inline-block none 当然,还有更多的一些属性,我们只提及主要部分. 块级元素,在浏览器中通常是垂直布局,然后可以用margin…

hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两边固定宽度,中间自适应)需要触发hasLayout与BFC:很多奇形怪状的IE bug的解决需要触发hasLayout…至于详细的用法这里就不做详细说明了,这里说说触发hasLayout与BFC的条件: hasLayout Layout是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算…

1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局,是为了浏览器的性能和简洁--! 常见的哪些元素在ie6/7上是有布局的呢?常见的列举下: body,html,table/tr/th/td,img,input/button/file/select/textarea,frame 所以对于div.span.p等等元素就可能会出现没有布局的情况,就是没…

1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout . ‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分.在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织…

感谢CSS涛的分享,参考文章: (1)haslayout:http://aibusy.com/blog/?p=53 (2)BFC 神奇背后的原理:http://aibusy.com/blog/?p=86, http://blog.melonhuang.gitpress.org/~docs/css/1formattingContext.md 作用:…

这篇专门讲BFC和haslayout的 这篇就不用说了,讲浮动的,张鑫旭大神的 , 这一系列有三篇…

在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的. 元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器), 因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level box: disp…

布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是很深入的了解,但至少一行不用在在上面的问题上浪费时间了(捂脸). 一.什么是BFC? BFC(Block Formatting Context)直译为“块级格式化范围”. W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的…

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮…

转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式化范围". 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布…