BFC-块状格式化上下文
时间:2019-11-12
本文章向大家介绍BFC-块状格式化上下文,主要包括BFC-块状格式化上下文使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
块状格式化上下文(Block Formatting Context,BFC)
MDN对BFC的定义:是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
BFC是一个独立的渲染空间,只有块级元素参与,规定了内部元素如何布局,并且与这个区域外部的元素不相干。
触发BFC
- 根元素(html)
- 浮动元素(float不为none)
- 绝对定位元素(元素的position为absolute或fixed)
- 行内块元素(display为inline-block)
- 表格相关元素(display为table-cell,table-caption,table,table-row, table-row-group, table-header-group, table-footer-group或inline-table)
- overflow不为visible的元素
- display为flow-root(The value name of
flow-root
makes sense when you understand you are creating something that acts like theroot
element (<html>
element in browser) in terms of how it creates a new context for the flow layout inside it.) - 弹性元素(display为flex或inline-flex元素的直接子元素)
- 网格元素(display为grid或inline-grid元素的直接子元素)
- 多列容器(元素的column-count或column-width不为auto,包括column-count为1), column-span为all的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
- contain值为layout、content或paint的值
布局规则
- 在一个BFC中,块盒与行盒都会垂直的沿着其父元素的边框排列
- 垂直方向的距离由margin来决定,属于同一个bfc中的两个相邻的元素的上下margin会重叠
- 每一个元素的margin-left和父元素的border-left相接触
- bfc的区域不会和浮动区域相重叠
- bfc和区域外部的元素不相干
- 在计算bfc高度时,浮动元素也会参与计算
- 浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其他BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距重叠也只会发生在属于同一BFC的块级元素之间
BFC可以做什么呢?
包含浮动,清除父元素高度塌陷问题
浮动元素会脱离文档流(绝对定位也会)。如果一个没有高度或者height是auto的容器的子元素是浮动的,则该容器的高度是不会被撑开的。BFC能包含浮动,也能解决容器高度不会被撑开的问题。
避免外边距重叠
BFC产生外边距折叠要满足一个条件:两个相邻元素要处于同一个BFC中。所以,若两个相邻元素在不同的BFC中,就能避免外边距折叠。
使用BFC可以实现两栏布局,一侧元素浮动,另一侧触发BFC
在多列布局中使用BFC
如果我们创建一个占满整个容器宽度的多列布局,在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC,它将总是占据其他列先占位完毕后剩下的空间。因为bfc的区域不会和浮动区域相重叠
原文地址:https://www.cnblogs.com/jett-woo/p/11838883.html
- 程序猿的日常——HashMap的相关知识
- 深度学习框架之一:Theano
- 微信年度最重磅发布!小游戏突然上线,游戏行业会变天么?
- Table View滑动时报错
- knockout源码分析之执行过程
- knockout源码分析之订阅
- bootstrap源码分析之Carousel
- BOOtstrap源码分析之 tooltip、popover
- 两个链表的第一个公共结点
- mac下Android开发环境搭建
- 三位数的排列组合
- Undefined symbols for architecture i386:"_OBJC_CLASS_$_xx", referenced from: 解决方法
- Xcode5.0使用iOS6.1SDK及模拟器
- 内存泄露
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python流程控制语句的深入讲解
- 在keras里面实现计算f1-score的代码
- Keras官方中文文档:性能评估Metrices详解
- Django QuerySet查询集原理及代码实例
- Python中zipfile压缩文件模块的基本使用教程
- 基于nexus3配置Python仓库过程详解
- Python Django中间件使用原理及流程分析
- keras读取h5文件load_weights、load代码操作
- 简单了解Python变量作用域正确使用方法
- Python实现Keras搭建神经网络训练分类模型教程
- keras导入weights方式
- 使用Keras实现简单线性回归模型操作
- 音频处理 windows10下python三方库librosa安装教程
- Python Excel vlookup函数实现过程解析
- 浅谈Python 函数式编程