支持BFC的浏览器（IE8+，firefox，chrome，safari）

Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。

BFC布局规则：

—内部的Box会在垂直方向，一个接一个地放置。

—Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

—每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此

—BFC的区域不会与float box重叠

—BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。

—计算BFC的高度时，浮动元素也参与计算

什么情况会创建BFC?

—根元素

—float属性不为none

—position为absolute或fixed

—display为inline-block，table-cell，table-caption，flex，inline-flex

—overflow不为visible

即

 
启动BFC
取消BFC
<html>
 
 
float
除 none 以外的值
  
position
absolute,fixed
relative
display
inline-block,table-cell,table-caption,flex,inline-flex
 ...
overflow
 除 visibile 以外的值  
 

haslyout（IE6-7）

haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。
在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。
当一个元素的hasLayout属性值为ture时，我们说这个元素有一个布局（layout）
 
 启动haslayout的值
取消haslayout的值
display
 inline-block
其他值
width/height
除了auto以外的值
auto
position
absolute
static
float
left或right
none
zoom（zoom是微软IE专有属性，可以触发haslayout但不会影响页面的显示效果。zoom：1常用来除错，不过ie5对这个属性不支持。）
 有值
normal或者空值
min-height、min-width
任何值
 
max-height、max-width
任何值除了none
 
overflow、overflow-x、overflow-y
任何值除了visible
 
position fixed
 
 
 
 
 
下列元素默认haslayout=true
<table><td><body><img><hr><input><select><textarea><button><iframe><embed><object><applet><marquee>

BFC和haslayout（IE6-7）（待总结。。。）的更多相关文章

  1. 谈BFC和haslayout

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

  2. BFC and Haslayout

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

  3. BFC与hasLayout

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

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

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

  5. BFC与hasLayout之间的故事

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

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

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

  7. BFC 和 haslayout

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

  8. BFC与HasLayout的理解

    1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域 ...

  9. BFC和haslayout

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

随机推荐

  1. 如何简单去掉dede后台的验证码 dedecms5.7 验证码怎么去掉

    很多朋友都在找,如何去掉dede后台的验证码,每次登陆都很繁琐.        现在教大家一个dedecms5.7 验证码怎么去掉的最直接的方法: 在dedecms5.7[验证码安全设置]里,说修改后 ...

  2. JS请求报错：Unexpected token T in JSON at position 0

    <?php /* 最近做一个ajax validate表单验证提交的代码,在ajax提交的时候 JS请求报错:Unexpected token T in JSON at position 0 描 ...

  3. C# 的概念

    1,C#-ASP.NET C# 的概念 2,Intro ASP.NET 一,基本概念: 1,C#--语言 microsoft 开发的纯面向对象的语言,是VS2005的主流开发语言. 语言的发展 C-- ...

  4. js 简单getByClass得封装

    function getByClass(oParent,sClass){ var elems = oParent.getElementsByTagName("*"); var ar ...

  5. vue2.X slot 分发内容

    1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...

  6. 【Excle数据透透视表】如何删除数据透视表

    选中区域A4:C17,在键盘上按DELETE键删除,结果提示: 那么如何删除呢? 解决方案 选中整个数透视表,再删除 具体操作: 选中整个数据透视表→DELETE 注意:删除之后,源数据不会受到影响

  7. 【BIEE】BIEE报表根据维度表展示事实表不存在的维度

    事实表数据 维度表数据 现在报表展示如下: 这样展示报表让人感觉数据缺失了,需要显示成如下样子,感觉会比较舒服一点 那么,如何实现上面的完美操作呢? 实现步骤 分析编辑页面→表视图属性→包含仅具有空行 ...

  8. select设置innerHMTL

    select控件在标准浏览器下可以直接innerHTML设置内容,IE则不行. HTML结构: <form name="form1"> <select name= ...

  9. 基于pcl 和 liblas 库 las与pcd格式（rgb点）相互转换（win10 VS2013 X64环境 ）

    #include <liblas/liblas.hpp> #include <iomanip> #include <iostream> #include <s ...

  10. Fakeapp2.2安装，使用简记--------------转载自iJessie

    原文:https://www.cnblogs.com/iJessie/p/8568377.html 1,硬件和操作系统,支持cuda的Nvidia显卡,8G及以上的内存,Windows10 x64(推 ...