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”的元素
Filed under: CSS, 兼容性, 前端开发

Tags: css, html, IE兼容性, 前端

hasLayout与BFC的触发条件的更多相关文章

  1. BFC的布局规则以及触发条件

          1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元 ...

  2. BFC的布局规则和触发条件

    1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元素格式化上下 ...

  3. BFC概念和作用，触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  4. 更加直观地了解hasLayout和BFC

    网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂.所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响. 基础知识 在讲hasLayout ...

  5. 实践中总结——理解haslayout和BFC

    1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...

  6. CSS学习（二）- 有关 hasLayout 和 BFC

    1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通 ...

  7. Nginx 502错误触发条件与解决办法汇总(转载)

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...

  8. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  9. Oracle DBWR,LGWR,CKPT,ARCH 触发条件 总结

    一.  DBWR写磁盘数据触发条件 1. 当进程在辅助LRU链表和主LRU链表上扫描以查找可以覆盖的buffer header[空闲缓冲区]时,如果已经扫描的buffer header的数量到达一定的 ...

随机推荐

  1. angularJS ng-grid 配置

    以下是按我的需求修改的 简单的demo  可以自己扩展 HTML: <!DOCTYPE html> <html class="no-js" ng-app=&quo ...

  2. 搭建自己本地yum源

    1.挂载系统光盘(注:medi下的cdrom是我自己创建的,可以挂载在任意目录) [root@liutao ~]# mount /dev/cdrom /media/cdrom/ 2.修改yum配置文件 ...

  3. Flyer(二分 HDU4768)

    Flyer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  4. JAVA基础知识之JDBC——编程步骤及执行SQL

    JDBC编程步骤 下面以mysql数据库为例, 1.加载驱动 首先需要下载数据库的驱动jar文件,并且在eclipse包中加入到class path中去, 例如mysql的驱动文件 mysql-con ...

  5. 远程读取json数据并写入数据库

    参考:http://www.jb51.net/article/39937.htm $curlPost = 'a=1&b=2';//模拟POST数据$ch = curl_init();curl_ ...

  6. Auty自动化测试框架第五篇——框架内部的调用支持、自动化安装库与配置说明

    [本文出自天外归云的博客园] 本次对Auty自动化测试框架做些收尾工作,由于在scripts文件夹中的脚本会需要调用其他包结构文件夹中的脚本,所以这里需要添加一下框架对于内部脚本间互相调用的支持,这里 ...

  7. [poj2528] Mayor's posters (线段树+离散化)

    线段树 + 离散化 Description The citizens of Bytetown, AB, could not stand that the candidates in the mayor ...

  8. [问题2014A10] 解答

    [问题2014A10]  解答 考虑如下变形: \[(I_n-A)^2=(AA'-A)(I_n-A)=A(A'-I_n)(I_n-A)=-A(I_n-A)'(I_n-A).\] 因为 \(A\) 是非 ...

  9. 【转载】C++中的位拷贝和值拷贝

    ---恢复内容开始--- 原文:C++中的位拷贝和值拷贝 原文:http://blog.csdn.net/liam1122/article/details/1966617 为了便于说明我们以Strin ...

  10. CentOS 7安装Mysql并设置开机自启动

    CentOS 7不带Mysql数据库了,默认的数据库是MariaDB(Mysql的一个分支). 可以按照以下步骤手动安装Mysql数据库. 1. 下载rpm安装文件 wget http://repo. ...