学习BFC心得
2016-05-18 00:33
435 查看
首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化范围”。
它的作用是决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
其通俗理解可以理解为一个BFC块就是一个独立的单位,其互不打扰。
BFC块的表现规则有一下几个情况:
在BFC块中的元素,其子元素按照文档流一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于‘margin’特性。这里要注意外边距塌陷的问题,在Css中Collapsing marign的特性1就是在相邻的普通文档流中的块框在垂直位置的空白边会发生margin重叠现象。垂直方向上相邻的两个外边距(margin)会合并成一个,最终的大小,是两个中较大的。 然而BFC可以解决这个问题,方法是将这个两个容器添加至一个具有BFC特性的包裹容器中。
每一个元素左外边会与包含块的左边相接触
BFC是一个独立容器,里面的子元素不会再布局上影响到外面的元素,外面的元素也不会影响其元素。
BFC元素不可以与浮动元素重叠
当包容容器有足够的剩余空间时,浏览器会将BFC放在浮动元素所在行的剩余空间内。
BFC块如何产生:
float的值不为none
overflow的值不为visible
display的值为table-cell,table-caption,inline-block中的任何一个
position的值不为relative和static
BFC的能力:
不和浮动元素重叠
清除元素的内部浮动 (
在进行普通流中的块级非替换元素的高度计算时,浮动子元素不参与计算。在计算生成了 block formatting context 的元素的高度时,其浮动子元素应该参与计算。所以,触发外部容器BFC,高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。
)
清除外边距塌陷。
它的作用是决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
其通俗理解可以理解为一个BFC块就是一个独立的单位,其互不打扰。
BFC块的表现规则有一下几个情况:
在BFC块中的元素,其子元素按照文档流一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于‘margin’特性。这里要注意外边距塌陷的问题,在Css中Collapsing marign的特性1就是在相邻的普通文档流中的块框在垂直位置的空白边会发生margin重叠现象。垂直方向上相邻的两个外边距(margin)会合并成一个,最终的大小,是两个中较大的。 然而BFC可以解决这个问题,方法是将这个两个容器添加至一个具有BFC特性的包裹容器中。
每一个元素左外边会与包含块的左边相接触
BFC是一个独立容器,里面的子元素不会再布局上影响到外面的元素,外面的元素也不会影响其元素。
BFC元素不可以与浮动元素重叠
当包容容器有足够的剩余空间时,浏览器会将BFC放在浮动元素所在行的剩余空间内。
BFC块如何产生:
float的值不为none
overflow的值不为visible
display的值为table-cell,table-caption,inline-block中的任何一个
position的值不为relative和static
BFC的能力:
不和浮动元素重叠
清除元素的内部浮动 (
在进行普通流中的块级非替换元素的高度计算时,浮动子元素不参与计算。在计算生成了 block formatting context 的元素的高度时,其浮动子元素应该参与计算。所以,触发外部容器BFC,高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。
)
清除外边距塌陷。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析