BFC和haslayout（IE6-7）（待总结。。。）
支持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的值 |
取消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 |
|
|
|
|
|
BFC和haslayout（IE6-7）（待总结。。。）的更多相关文章
- 谈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
BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
- BFC与hasLayout之间的故事
刚拒绝了一个很有诱惑的公司,不是不想去,而是对现在的能力还不确定,希望能够进一步提高自己的技能,所有想写博客了,监督自己的学习进度·········现在还没有开放博客,希望成熟一些后再开放吧! 进入正 ...
- CSS的BFC和hasLayout及其应用场景
前端精选文摘:BFC 神奇背后的原理 一.BFC是什么? 先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观 ...
- BFC 和 haslayout
在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...
- BFC与HasLayout的理解
1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域 ...
- BFC和haslayout
待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...
随机推荐
- Bootstrap 模态框、轮播 结合使用
Bootstrap 模态框和轮播分开使用的教程网上非常多.可是两者结合使用的样例和资料非常少. 两者结合使用时,開始我遇到了不少bug,如今分享给大家. 我的这个样例是把图片轮播嵌入到模态框里. 最后 ...
- PS中混合模式是什么意思？
PS中图层混合模式中的溶解,变暗,正片叠底,颜色加深,线性加深,叠加,柔光,亮光,强光,线性光,点光,实色混合,差值,排除,色相,饱和度,颜色,亮度各是什么原理? Normal 正常模式,也是 ...
- vuex 中关于 mapMutations 的作用
mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...
- Oracle中group by 的扩展函数rollup、cube、grouping sets
Oracle的group by除了基本使用方法以外,还有3种扩展使用方法,各自是rollup.cube.grouping sets.分别介绍例如以下: 1.rollup 对数据库表emp.如果当中两个 ...
- memcpy( )的使用以及迭代器的使用
memcpy() -- 拷贝内存内容 相关函数: bcopy(), memccpy(), memmove(), strcpy(), strncpy() 表头文件: #include <strin ...
- 查看本机外网ip地址
DOS下是无法查看外网IP的,只能获取本机内网IP地址 外网IP只能通过专门的测IP网站 http://www.ip138.com/ip2city.asp
- 用命令行执行ROBOT FRAMEWORK
除了在ride中执行用例,我们也可以通过命令行的形式执行用例. 1.执行一整个项目 pybot+项目路径 2.执行某个测试集 pybot+测试集的路径 3.执行某个测试集里面的某个用例 pybot - ...
- MySQL 优化、设计规则浅谈
当数据量大,数据库相应慢时都会针对数据库进行优化.这时都是要针对具体情况,具体业务需求进行优化的. 但是有些步骤和规则应该适合各种情况的.这里综合网上找的资料简单分析一下. 第一优化你的sql和索引: ...
- Java结束线程的三种方法
线程属于一次性消耗品,在执行完run()方法之后线程便会正常结束了,线程结束后便会销毁,不能再次start,只能重新建立新的线程对象,但有时run()方法是永远不会结束的.例如在程序中使用线程进行So ...
- 在eclipse中添加android ADT
对于程序开发的学者来说,eclipse并不陌生,它为我们提供了一个非常广阔的平台来开发程序.同样我们也可以用它来开发android程序. 但是在eclipse中并不能直接开发android程序,需要我 ...