BFC基础了解
2016-08-04 15:19
176 查看
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
触发BFC的情景:
根元素
适用场景:自适应两栏布局、防止margin重叠、清除内部浮动。
IE的haslayout:
hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer中,元素使用“布局”概念来控制尺寸和定位,分为拥有布局和没有布局两种情况,拥有布局的元素由它控制本身及其子元素的尺寸和定位,而没有布局的元素则通过父元素(最近的拥有布局的祖先元素)来控制尺寸和定位,而一个元素是否拥有布局则由hasLayout
属性告知浏览器,它是个布尔型变量,true 代表元素拥有布局,false代表元素没有布局。简而言之,hasLayout 只是一个 IE 下专有的属性,hasLayout 为 true的元素浏览器会赋予它一系列的效果。
特别注意的是,hasLayout 在 IE 8及之后的 IE 版本中已经被抛弃,所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发hasLayout。
IE 设计者默认只为一部分的元素触发hasLayout (即默认有部分元素会触发 hasLayout ,这与 BFC 基本完全由开发者通过特定 CSS触发并不一样),
除了 IE 默认会触发 hasLayout 的元素外,Web 开发者还可以使用特定的 CSS 触发元素的 hasLayout。通过为元素设置以下任一 CSS ,可以触发 hasLayout (即把元素的 hasLayout 属性设置为 true)。
详细可参考:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
相关应用可参考:http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
触发BFC的情景:
float的值不为
none。
overflow的值为
auto,
scroll或
hidden。
display的值为
table-cell,
table-caption,
inline-block中的任何一个。
position的值不为
relative和
static。
根元素
适用场景:自适应两栏布局、防止margin重叠、清除内部浮动。
IE的haslayout:
hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer中,元素使用“布局”概念来控制尺寸和定位,分为拥有布局和没有布局两种情况,拥有布局的元素由它控制本身及其子元素的尺寸和定位,而没有布局的元素则通过父元素(最近的拥有布局的祖先元素)来控制尺寸和定位,而一个元素是否拥有布局则由hasLayout
属性告知浏览器,它是个布尔型变量,true 代表元素拥有布局,false代表元素没有布局。简而言之,hasLayout 只是一个 IE 下专有的属性,hasLayout 为 true的元素浏览器会赋予它一系列的效果。
特别注意的是,hasLayout 在 IE 8及之后的 IE 版本中已经被抛弃,所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发hasLayout。
IE 设计者默认只为一部分的元素触发hasLayout (即默认有部分元素会触发 hasLayout ,这与 BFC 基本完全由开发者通过特定 CSS触发并不一样),
除了 IE 默认会触发 hasLayout 的元素外,Web 开发者还可以使用特定的 CSS 触发元素的 hasLayout。通过为元素设置以下任一 CSS ,可以触发 hasLayout (即把元素的 hasLayout 属性设置为 true)。
display: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值) min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值,仅用于块级元素) overflow-x: (除 visible 外任意值,仅用于块级元素) overflow-y: (除 visible 外任意值,仅用于块级元素) position: fixed
详细可参考:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
相关应用可参考:http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
相关文章推荐
- 熟悉/了解C#----基础问题
- 零基础易语言入门教程(三)之了解控制台程序
- 最近在学习windows 编程,了解了很多的基础的东西,遇见了很多的问题
- 《网络基础学习之八》了解集线器
- 深入了解MIDP-基础篇⑷
- 数字证书-基础了解篇
- 了解Java密码扩展的基础
- 网络安全应该了解的基础大全(收集)
- 3D图形算法基础,吐血推荐,想了解3D数学的来看看啊!
- Java 应了解的基础知识(转载)
- Java 应了解的基础知识
- .NET 2.0 基础技术列表,你了解多少?
- 使用 Axis2 进行 SOA 开发,第 1 部分: 了解 Axis2 基础
- 网络基础知识讲座十八:了解iBGP路由协议
- Java 应了解的基础知识(转载)
- 使您的软件运行起来: 了解有关缓冲区溢出方面的基础知识
- 学Java前要了解的一些基础知识
- 用Axis2进行SOA开发:了解Axis2基础
- 了解Java密码扩展的基础
- 了解一下下MFC---基础中的基础