关于BFC及其应用

参考掘金网易考拉团队的文章

BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。块格式上下文是页面CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC的创建方法:
1.根元素或其他包含他的元素
2.浮动(float不为none)
3.绝对定位元素(position为absolute或者fixed)
4.行内块(元素为inline-block)
5.表格单元格(display:table-cell)
6.overflow的值不为visible
7.弹性盒:display :flex

BFC的作用:
1.内部的盒会在垂直一个个排列
2.处于同一个BFC的元素互相影响,可能会发生边缘折叠
3.每个元素的marginbox的左边与容器块的borderbox的左边相接触
4.让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
5.计算元素高度时,浮动元素也会被计算在内
6.浮动盒区域不叠加在BFC上

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    陌客百里阅读 3,471评论 3 4
  • 转载自(http://web.jobbole.com/83274/) BFC BFC全称是Block Format...
    居客侠阅读 6,414评论 0 20
  • BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于C...
    xf0128阅读 2,924评论 0 0
  • 一、什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1...
    笨蛋小明阅读 10,793评论 2 8
  • 1.背景介绍 BFC全称是Block Formatting Context,是CSS2.1规范定义的,关于CSS渲...
    你隔壁的陌生人阅读 4,874评论 0 0