今天提到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. LruCache算法原理及实现

    LruCache算法原理及实现 LruCache算法原理 LRU为Least Recently Used的缩写,意思也就是近期最少使用算法.LruCache将LinkedHashMap的顺序设置为LR ...

  2. selenium 3.0 beta2 初体验

    经过漫长的等待,终于迎来了selenium 3.0 从selenium 1.0 至今,差不多有十多年的历史.这个月终于迎来了selenium3.0 那么selenium3.0 为我们带来了什么? 看一 ...

  3. FFmpeg介绍

    ---恢复内容开始--- FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常 ...

  4. linux的相关指令命令

    ls:查看当前所在的目录 whoami:查看当前所在的用户名 who:(查看所有的正在使用的用户名) id:唯一的识别编号(组所在的识别编号) uname  -a:显示当前操作系统的版本 cd:切换工 ...

  5. Atom使用记录(持续更新中)

    部分内容取自:http://www.jianshu.com/p/dd97cbb3c22d,我自己也在使用,持续更新中 Atom安装插件在窗口中File---Setting---install 在里面进 ...

  6. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  7. js如何求一组数中的极值

    这是一个很简单的问题,现在我们从循环开始,例如一组数[5,2,1,3,4];求其中的最大值,那么首先我们要定义一个max的中间变量,遍历数组,当遇到比max值大则赋值给max,直到循环结束,就能获取这 ...

  8. SVN数据仓库迁移

    1.在新服务器上部署环境 yum -y install subversion 2.备份原服务器数据仓库 svnadmin dump /home/myrepos >/data/svn_dump s ...

  9. python enumerate用法

    含义:"枚举,列举" 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 enumerate多 ...

  10. Qt基本框架介绍

    #include <QApplication>#include <QWidget> int main(int argc, char *argv[]){ QApplication ...