hasLayout与BFC的触发条件
hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念，在很多时候，我们需要触发它们去实现有些效果。例如清除浮动时需要触发hasLayout与BFC；很多自适应的两栏和三栏布局（两边固定宽度，中间自适应）需要触发hasLayout与BFC；很多奇形怪状的IE bug的解决需要触发hasLayout…至于详细的用法这里就不做详细说明了，这里说说触发hasLayout与BFC的条件：
hasLayout
Layout是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用。HTML的元素中，有些是默认就已经触发了Layout，而有些默认没有触发。当IE的Layout被触发后，我们就说该元素“拥有布局”，使用object.currentStyle.hasLayout可获取到ture值，否则将获取到false，并且Layout的触发是不可逆的。关于Layout的更详细介绍，推荐这篇文章《On having layout》。hasLayout的触发条件如下：
- display: inline-block
- height: (除 auto 外任何值)
- width: (除 auto 外任何值)
- float: (left 或 right)
- position: absolute
- zoom: (除 normal 外任意值)
- writing-mode: tb-rl
附1：IE7特有的触发Layout的属性
- min-height: (任意值)
- min-width: (任意值)
- max-height: (除 none 外任意值)
- max-width: (除 none 外任意值)
- overflow: (除 visible 外任意值，仅用于块级元素)
- overflow-x: (除 visible 外任意值，仅用于块级元素)
- overflow-y: (除 visible 外任意值，仅用于块级元素)
- position: fixed
附2：默认触发Layout的HTML元素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
BFC
BFC，块格式化上下文( Block formatting context )，是指初始化块级元素定义的环境。在CSS中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。其中我们使用比较多的是块级可视化上下文，CSS3草案中将之称为“flow root”，但我们仍习惯叫BFC，其的触发条件如下：
- 浮动元素（float除了none）
- 绝对定位元素(absolute/fixed)
- 设置了’display’ 属性为 “inline-block”，”table-cell”， “table-caption” 的元素
- 设置了overflow 非 “visible”的元素
hasLayout与BFC的触发条件的更多相关文章
- BFC的布局规则以及触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元 ...
- BFC的布局规则和触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元素格式化上下 ...
- BFC概念和作用，触发条件
1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...
- 更加直观地了解hasLayout和BFC
网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂.所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响. 基础知识 在讲hasLayout ...
- 实践中总结——理解haslayout和BFC
1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...
- CSS学习（二）- 有关 hasLayout 和 BFC
1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通 ...
- Nginx 502错误触发条件与解决办法汇总(转载)
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...
- 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
- Oracle DBWR,LGWR,CKPT,ARCH 触发条件 总结
一. DBWR写磁盘数据触发条件 1. 当进程在辅助LRU链表和主LRU链表上扫描以查找可以覆盖的buffer header[空闲缓冲区]时,如果已经扫描的buffer header的数量到达一定的 ...
随机推荐
- Linux crontab 命令详解
在 Linux 中,任务可以被配置在指定的时间段.指定的日期.或系统平均载量低于指定的数量时自动运行.红帽企业 Linux 预配置了对重要系统任务的运行,以便使系统能够时时被更新.譬如,被 locat ...
- Windows server 2012 AD DS 搭建步骤
服务器版本:Windows server 2012 1. 配置网络,由于本机会搭建DNS服务器,因此首选DNS服务器设置为127.0.0.1 2. 打开服务器管理器 3. 点击添加角色和功能,下 ...
- WINDOWS Composer & PHPUnit 安装记录
Windows: 安装Composer: 下载了composer_setup.exe 运行之后提示和Xdebug冲突,在php.ini中注释掉php_xdebug.dll,再次运行.通过 compos ...
- JPA入门案例详解（附源码）
1.新建JavaEE Persistence项目
- yii2中gii外网访问的配置方法
if (YII_ENV_DEV) { // configuration adjustments for 'dev' environment $config['bootstrap'][] = 'debu ...
- Shell重定向文件描述符
#!/bin/bash 最近在看shell,各种困惑,不过解决困惑的感觉还是很不错的.废话少说,linux中使用文件描述符来标识每个文件对象.文件描述符为一个非负整数,可以唯一标识会话中打开 ...
- javascript数组常用方法汇总
1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使 ...
- flash的动态加载技术
这里所说的动态加载技术, 主要是指代码模块(可以是swc也可以是swf)的动态加载.即主swf在运行的时候, 可以根据需要动态加载所需的代码模块. 为了讨论方便, 下面所说的代码模块都用swc表示,用 ...
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- DIV设置overflow无效的原因
因为项目需求需要在一个div中添加多个checked 添加的时候使用了 <label><input type="checkbox" value="123 ...