今天提到BFC和haslayout，就顺带在网上查查资料，总结一下它们。

CSS2我们再熟悉不过，当然它里面我们需要掌握的，就是CSS2的选择器和布局，选择器总共31种。避开这个不说，我们说布局。

布局经常用到的有浮动、定位，当然也需要知道盒子模型，这里的盒子模型不是说就是内边距、外边距、边框等，他们只是其中的一种。

盒子模型总共有5个：1) BFC；2) haslayout；3) 元素盒 ；4) EM盒 ；5) 行盒

BFC：

含义：顾名思义就是Block Formatting Context。

怎么触发形成：

  • float 不能设置为 none。
  • overflow 不能设置为 visible。
  • display 的值为（table-cell、table-caption、inline-block）。
  • position 不能设置为 relative 和 static。

haslayout：

含义：“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时

由来：不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

下列元素应该是默认具有 layout 的：

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>

作用：

清除浮动；

不和浮动元素重叠（效果同BFC）；

水平两栏自适应排版；

.second-item { overflow: hidden; *zoom: 1;//IE6 }

谈BFC和haslayout的更多相关文章

  1. BFC and Haslayout

    一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...

  2. 文本溢出、垂直外边距合并、BFC、hasLayout

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  3. BFC与hasLayout

    BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...

  4. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  5. BFC和haslayout

    待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...

  6. BFC与hasLayout之间的故事

    刚拒绝了一个很有诱惑的公司,不是不想去,而是对现在的能力还不确定,希望能够进一步提高自己的技能,所有想写博客了,监督自己的学习进度·········现在还没有开放博客,希望成熟一些后再开放吧! 进入正 ...

  7. 轻谈BFC

    BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positi ...

  8. CSS的BFC和hasLayout及其应用场景

    前端精选文摘:BFC 神奇背后的原理 一.BFC是什么? 先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观 ...

  9. BFC和haslayout（IE6-7）（待总结。。。）

    支持BFC的浏览器(IE8+,firefox,chrome,safari) Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改 ...

随机推荐

  1. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  2. 《转载》跟我学spring3

    一.<跟我学spring3>电子书下载地址: <跟我学spring3>  (1-7 和 8-13) http://jinnianshilongnian.iteye.com/bl ...

  3. MySQL 专用备份软件参考

    1.MySQL Backup Tool   免费(需要安装 .NET 3.5)  https://sourceforge.net/projects/mysqlbutool/?source=typ_re ...

  4. 企业号查询部门id(改版后)

    1.搜索部门,输入"名称" 2.在后面可以查到部门ID

  5. cacti 安装

    cacti:是常用的一个监控软件(开源,免费) 特点:重图形,有数据历史,需要用到数据库的支持,支持web配置,默认不支持告警,可以加插件 cacti安装 1.安装扩展源epel (nagios 和z ...

  6. Delphi中DBChart的数据库应用

    一:属性相关:Series选项: (1)Format页(数据柱的风格) 在Color Each中打勾,就可使用多种颜色显示,color按钮用于设置颜色,Style用于设置图表的风格(Rectangle ...

  7. linux下误删mysql的root用户，解决方法

    开始对liunx界面不熟悉,可能由于不小心,把root误删了,怎么办? 1. # killall mysqld    干掉所有mysql进程 2. # mysqld_safe --skip-grant ...

  8. webservices接口 file &quot;/axis2-web/listsingleservice.jsp&quot; not found 问题解决

    搞了半天 ,原来是services.xml  配置的某个或者某些service 在代码中不存才.扫描的时候找不到对应的service代码所以就会报错

  9. windows C++实现注销、重启、关机 logoff reboot shutdown

    实现这一功能很简单,主要需要调用一个系统API ExitWindowsEx 功能就是,注销当前用户,关闭系统,或者重新启动系统. 它会发送一个WM_QUERYENDSESSION消息给所有的应用程序, ...

  10. Python爬虫Scrapy框架入门（3）

    往往需要爬取的网页是呈一个树状结构.比如,需要先爬取一个目录,然后再在目录中选择具体的爬取目标.而目录和具体目标之间,网页结构不同,使得我们不能使用相同的爬取策略. 从之前的经验来看,我们对scrap ...