CSS的BFC和hasLayout及其应用场景
一、BFC是什么?
先介绍 Box、Formatting Context的概念。
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
- block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
- run-in box: css3 中才有, 这儿先不讲了。
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
二、哪些元素会生成BFC?
BFC( block formatting context)块级格式上下文
当发生下面的任一条时,就会触发BFC
- the root element or something that contains it
- floats (elements where
float
is notnone
) - absolutely positioned elements (elements where
position
isabsolute
orfixed
) - inline-blocks (elements with
display
: inline-block
) - table cells (elements with
display
: table-cell
, which is the default for HTML table cells) - table captions (elements with
display
: table-caption
, which is the default for HTML table captions) - elements where
overflow
has a value other thanvisible
- flex boxes (elements with
display
: flex
orinline-flex
)
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
display:table 本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
三、hasLayout
从表现上来说,hasLayout 可以等同于 BFC
IE浏览器版本:
IE6(2001年8月) IE7(2005年7月) IE8(2009年3月) IE9(2011年3月)
IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念,由于这个显示引擎自身存在很多的缺陷,直接导致了IE6-7的很多显示bug。
当我们说一个元素“得到 layout”,或者说一个元素“拥有 layout” 的时候,我们的意思是指它的微软专有属性 hasLayout被设为了 true 。
IE6-7使用布局的概念来控制元素的尺寸和定位,那些拥有布局(have layout)的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false,那么它的尺寸和位置由最近拥有布局的祖先元素控制。
触发hasLayout的条件:
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值 (例如很多人闭合浮动会用到 height: 1% )
- zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
- writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
- 在 IE7 中,overflow 也变成了一个 layout 触发器:
- overflow: hidden|scroll|auto ( 这个属性在IE之前版本中没有触发 layout 的功能。 )
综上所述:
在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;
在不支持 BFC的浏览器 (IE6-7),通过触发 hasLayout 闭合浮动。
应用场景
CSS的BFC和hasLayout及其应用场景的更多相关文章
- css 讲浮动,haslayout,BFC的文章
这篇专门讲BFC和haslayout的 这篇就不用说了,讲浮动的,张鑫旭大神的 , 这一系列有三篇
- 谈BFC和haslayout
今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布 ...
- BFC and Haslayout
一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
- BFC与hasLayout
BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- CSS魔法堂:hasLayout原来是这样!
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...
- BFC与hasLayout之间的故事
刚拒绝了一个很有诱惑的公司,不是不想去,而是对现在的能力还不确定,希望能够进一步提高自己的技能,所有想写博客了,监督自己的学习进度·········现在还没有开放博客,希望成熟一些后再开放吧! 进入正 ...
- BFC的特性及使用场景
BFC(Block Formatting Context)块级格式化上下文,是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域. BFC的特性: 1. 属于同一个 ...
随机推荐
- C#集合之栈
栈(Stack)和队列是非常类似的一个容器,只是栈是一个后进先出(LIFO)的容器. 栈用Push()方法在栈中添加元素,用Pop()方法获取最近添加的一个元素: Stack<T>与Que ...
- Python爬虫常用之登录(二) 浏览器模拟登录
浏览器模拟登录的主要技术点在于: 1.如何使用python的浏览器操作工具selenium 2.简单看一下网页,找到帐号密码对应的框框,要知道python开启的浏览器如何定位到这些 一.使用selen ...
- 二级C语言真题笔记
二级C语言真题笔记 1. 知识重点:数据类型.循环.数组.函数.指针.结构体与共同体 2. 求程序的运行结果 #include <stdio.h> main() { short i ...
- Java 的多态
1 多态的概念 多态(?) 可以理解为多种状态/多种形态 同一事物,由于条件不同,产生的结果不同 程序中的多态 同一引用类型,使用不同的实例而执行结果不同的. 同:同一个类型,一般指父类. ...
- 关于 vertical-align 的一些小知识
引子 在日常开发过程中,我们经常会遇到如下的场景,一行中既有图片也有文字,而且图片还要和文字对齐.效果如下: 通常代码如下: <!DOCTYPE html> <html> &l ...
- 【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
- HAProxy与Nginx区别
1)HAProxy对于后端服务器一直在做健康检测(就算请求没过来的时候也会做健康检查):后端机器故障发生在请求还没到来的时候,haproxy会将这台故障机切掉,但如果后端机器故障发生在请求到达期间,那 ...
- WPF与Winform中的不同(1)
1. 部分控件的Text属性,变成了 Content属性 如: winform中,Button.Text = "abc"; wpf中,Button.Content = " ...
- Java入门系列-13-String 和 StringBuffer
这篇文章带你学会字符串的日常操作 String类 字符串在日常生活中无处不在,所以掌握字符串的使用至关重要. 使用 String 对象存储字符串,String 类位于 java.lang 包中,jav ...
- HDU 5700——区间交——————【线段树+枚举】
区间交 Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submiss ...