首页 > 代码库 > BFC和haslayout（IE6-7）

BFC和haslayout（IE6-7）

2024-11-03 01:00:39   208人阅读

支持BFC的浏览器（IE8+，firefox，chrome，safari）

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

BFC布局规则：

—内部的Box会在垂直方向，一个接一个地放置。

—Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

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

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

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

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

 

什么情况会创建BFC?

—根元素

—float属性不为none

—position为absolute或fixed

—display为inline-block，table-cell，table-caption，flex，inline-flex

—overflow不为visible

即

 
启动BFC
取消BFC
<html>
 
 
float
除 none 以外的值
 
position
absolute,fixed
relative
display
inline-block,table-cell,table-caption,flex,inline-flex
...
overflow
除 visibile 以外的值 
 

haslyout（IE6-7）

haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。
在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。
当一个元素的hasLayout属性值为ture时，我们说这个元素有一个布局（layout）
 
启动haslayout的值
取消haslayout的值
display
inline-block
其他值
width/height
除了auto以外的值
auto
position
absolute
static
float
left或right
none
zoom（zoom是微软IE专有属性，可以触发haslayout但不会影响页面的显示效果。zoom：1常用来除错，不过ie5对这个属性不支持。）
有值
normal或者空值
min-height、min-width
任何值
 
max-height、max-width
任何值除了none
 
overflow、overflow-x、overflow-y
任何值除了visible
 
positionfixed
 
 
 
 
 
下列元素默认haslayout=true
<table><td><body><img><hr><input><select><textarea><button><iframe><embed><object><applet><marquee>

 

BFC和haslayout（IE6-7）


联系
我们