bfc和haslayout

BFC是什么

Block Formatting Context （块格式化上下文）是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下

的方式对其子元素进行排列：

元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于'margin' 特性。在BFc中相邻的块级元素的

垂直边距会折叠（collapse）。

元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）

要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方

当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性

转载于:https://www.cnblogs.com/wanger1994/p/4311749.html

bfc和haslayout相关推荐

BFC和haslayout（IE6-7）（待总结。。。）
支持BFC的浏览器(IE8+,firefox,chrome,safari) Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改 ...
hasLayout与Block formatting contexts的学习（上）
hasLayout与Block formatting contexts的学习 @(css BFC)[IE hasLayout|妙瞳] hasLayout是什么? haslayout 是Windows ...
【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
转答寒冬的面试题(1)
有关注前端和微博的朋友一定留意到了前一阵寒冬和玉伯关于前端面试的讨论,后来老赵和左耳朵耗子也加入其中,讨论带来了非常多的启发和思考--不久之前自己也经历了几轮面试,决心对自己的基础开始加强,正巧寒冬老 ...
CSS浮动(float)属性学习经验分享
作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的"门道". 下面就通过一些例子来归纳总结一 ...
CSS 清理浮动 clear属性
虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用.浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置. 首先,看看父元素的高度塌陷.假设有一个容器,其中两个子元素,一个子元 ...
就这样进入了前端开发
回顾立夏,广州.今晚回来的路上,在学校的草坪上发现许多萤火虫,眨着眨着,点缀这个初夏的静夜.上次见到这番画像的时候,已经是一年前的事了.时钟转得飞快,眨眼自己也到了毕业的季节,总想要装一下文艺.无奈 ...
答寒冬的面试题(1)
本文也发表在我另一篇独立博客qingbob.com: <答寒冬的面试题1> 有关注前端和微博的朋友一定留意到了前一阵寒冬和玉伯关于前端面试的讨论,后来老赵和左耳朵耗子也加入其中,讨论带来 ...

bfc和haslayout

bfc和haslayout相关推荐

最新文章

热门文章