1、（Block Formatting Contexts）BFC 定义
　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2、BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
3、哪些元素会生成BFC:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
1、haslayout：
‘Layout’ 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。。
     当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素拥有了一个布局（layout），即成功触发hasLayout
     默认拥有布局的元素：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
可触发 hasLayout 的 CSS 特性：
display: inline-block         /*ALL*/
height: (除 auto 外任何值)  /*仅适用IE6 7*/
width: (除 auto 外任何值)   /*仅适用IE6 7*/
float: (left 或 right)       /*ALL*/
position: absolute           /*ALL*/
writing-mode: tb-rl          /*ALL*/
zoom: (除 normal 外任意值)  /*仅适用IE6 7*/
IE7 还有一些额外的属性(不完全列表)可以触发hasLayout ：
min-height: (任意值)/*以下适用IE7+*/
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed
 
总结：
 1、Layout是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。
 2、BFC就是一个不让内部元素与外界相互影响，包容浮动子元素，并自身和外界的浮动盒子不重叠的盒子。
 3、Tips:我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)
 4、 IE有它自己的hasLayout属性，那么非IE浏览器呢？非IE浏览器采用的就是BFC（块格式化上下文）
  5.haslayout的原理 IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。
    
 
 
 
 
 
 
 
 
 
 
 
 
 
 

BFC与HasLayout的理解的更多相关文章

  1. BFC与hasLayout

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

  2. 谈BFC和haslayout

    今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布 ...

  3. BFC and Haslayout

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

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

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

  5. BFC和haslayout

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

  6. BFC与hasLayout之间的故事

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

  7. IE haslayout的理解与bug修复

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout 什么是 haslayout ? ...

  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. LNK2005 连接错误解决办法 2009-10-30 12:13

    nafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new(unsigned int)" (??2@ ...

  2. 结构体深度比较 reflect.DeepEqual

    demo1 package main import ( "fmt" "reflect" ) func main() { sliceMap1 := make([] ...

  3. selenium定位方法实例

    selenium定位方法实例 首先打开浏览器输入微博的网址,将网页最大化,等待3秒 from selenium import webdriver import time driver = webdri ...

  4. Deep Models Under the GAN: Information Leakage from Collaborative Deep Learning

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:1702.07464v3 [cs.CR] 14 Sep 2017 以下是对本文关键部分的摘抄翻译,详情请参见原文. ABSTR ...

  5. Ubuntu 下查看CPU 信息命令

    from: http://hi.baidu.com/hermitinhistory/blog/item/ce64d5fb6b23b71b6d22eb95.html 查看当前操作系统内核信息 uname ...

  6. .net core 中的经典设计模式的应用

    .net core 中的经典设计模式的应用 Intro 前段时间我们介绍了23种设计模式,今天来分享一下 asp.net core 种我觉得比较典型的设计模式的应用 实例 责任链模式 asp.net ...

  7. 【译】Database Profiling with Visual Studio

    你是否在排查运行缓慢的 web 应用程序时怀疑是数据库层造成的?以前排查数据库层需要特定的工具,现在可以使用 Visual Studio 的 Performance Explorer 中的数据库分析工 ...

  8. Leetcode 24. Swap Nodes in Pairs(详细图解一看就会）

    题目内容 Given a linked list, swap every two adjacent nodes and return its head. You may not modify the ...

  9. .NetCore使用Redis，StackExchange.Redis队列，发布与订阅，分布式锁的简单使用

    环境:之前一直是使用serverStack.Redis的客服端,今天来使用一下StackExchange.Redis(个人感觉更加的人性化一些,也是免费的,性能也不会差太多),版本为StackExch ...

  10. 基于JSP+Servlet的学生信息管理系统

    JavaWeb期末项目,一个基于JSP和Servlet的学生信息管理系统实现,前端用了bootstrap和一些自定义的css样式,数据库用了mysql 传送门: GitHub 实现功能 登录(教师, ...