浅谈BFC块状格式化上下文环境
来源:互联网 发布:北京房价数据app 编辑:程序博客网 时间:2024/06/06 02:13
一、BFC布局规则
1、内部的Box会在垂直方向,一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。(兄弟之间有影响,叔侄之间不影响)
6、计算BFC的高度时,浮动元素也参与计算
二、以下情况会创建BFC
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible
三、用途
解决浮动塌陷和边距塌陷。
阅读全文
1 0
- 浅谈BFC块状格式化上下文环境
- BFC(格式化上下文)
- 【CSS】浅谈css中格式化上下文BFC、IFC(一)
- 【CSS】浅谈css中格式化上下文BFC、IFC(二)
- BFC环境(block formatting context块级格式化上下文)
- CSS格式化上下文(BFC)
- BFC(块级格式化上下文)
- css中BFC格式化上下文
- BFC-块级格式化上下文
- 格式化上下文的介绍—BFC
- BFC(块格式化上下文)知识点整理
- BFC块级格式化上下文简述
- CSS--BFC(块级格式化上下文)
- CSS BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- 深入BFC块级格式化上下文
- BFC(块级格式化上下文)
- 清除浮动及 BFC(块级格式化上下文)
- 安装 Fedora 22 后要做的13件事
- ContextCompat
- C#Socket的使用与示例
- Kafka 设计与原理详解
- PAT程序设计考题——甲级1036( Boys vs Girls ) C++实现
- 浅谈BFC块状格式化上下文环境
- maven-依赖管理-实战篇
- 关于C#静态构造函数的几点说明
- bzoj 1559: [JSOI2009]密码 AC自动机+状压dp
- hdu 3072
- 2017上半年的工作总结
- HUD 1106 排序
- 和为S的连续正数序列
- piwik安装详解