BFC知识点概括与总结
什么是BFC?如何生成一个BFC?BFC有什么作用?
一:什么是BFC?
首先了解CSS中两个概念:box和formatting context。
Box:CSS布局中的基本单位。一个页面由多个box组成,元素的类型和display的属性决定了这个box的类型,不同类型的box会参与不同的formatting context,box内的元素会以不同的方式进行渲染。主要的box类型有以下两种:
1.块级元素block-leave block:它的display属性为block, list-item, table,参与block formatting context;
2.行级元素inline-level box:它的display属性为inline, inline-block, inline-table,参与inline formatting context。
formatting context:W3C CSS2.1规范中的概念。它是页面中的一块渲染区域,有一套渲染规则,它决定其子元素如何定位、和其他元素之间的关系与相互作用。常见的formatting context有BFC(Block formatting context)和IFC(Inline formatting context)。
BFC全称是“Block Formatting Context”,中文直译“块级格式化上下文”。它是一个独立的渲染区域(formatting context)。只有block-level box参与,它规定内部的block-level box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
- 内部的box会在垂直方向一个接一个的放置
- box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠
- 每个元素margin box的左边,与包含块border box的左边相接触(对于从左向右的格式化,否则相反),即使存在浮动也是如此;
- BFC区域不会与float元素重叠
- BFC是页面上的一个隔离的独立容器,容器内的子元素不会影响到外面的元素
- 计算BFC高度时,浮动元素也参与计算
如何生成BFC:
- 根元素
- float属性不为none
- position为absolute或者fixed
- dispaly为inline-block,table-cell, table-caption, flex, inline-flex
- overflow不为visible
有何作用:
1.自适应两栏布局
2.清除浮动
3.防止垂直margin重叠(外边距合并)
4.防止父子边距合并(外边距塌陷)
最新文章
- Java事务处理全解析(七)—— 像Spring一样使用Transactional注解(Annotation)
- 深入理解C#泛型
- FireFox背景亮度修改
- scjp考试准备 - 5 - 重载和重写
- 安装ie10慢的解决办法
- 食品药检所LIMS需求分析说明书
- (转)PHP下编码转换函数mb_convert_encoding与iconv的使用说明
- 2013年9月份阿里JAVA面试经历
- WinForm中快捷键与组合按键的设置方法
- hadoop搭建杂记:Linux下虚拟机集群网络搭建
- Inno Setup入门(三)——指定压缩方式
- 关于Android SDK Manager无法更新的解决办法
- 【java】之算法复杂度o(1), o(n), o(logn), o(nlogn)
- Nginx动静分离架构&;&;HA-LB集群整合
- 从零开始学 Web 之 Ajax(六)jQuery中的Ajax
- A1032. Sharing
- BIO | NIO | AIO (Java版)
- chaostoolkit 混沌工程工具集
- mysql 5.7.3.0-m13安装教程
- 代理 ip
热门文章
- Codeforce Round #555 Div.3 D - N Problems During K Days
- (十四)QFile操作,QByteArray,文件流操作,QTextStream,QDataStream,QFileInfo, QIODevice
- Number和toString中的坑
- 浅谈JS中逗号运算符的用法
- <;div>;标签仿<;textarea>;。contentEditable=‘true’,赋予非表单标签内容可以编辑
- 关于docker的基础教程
- filter的使用
- Httpclient发送json请求
- 079、监控利器 sysdig (2019-04-26 周五)
- Python包中 __init__.py文件的作用