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.防止父子边距合并(外边距塌陷)
BFC知识点概括与总结的更多相关文章
- C语言程序设计基础知识点概括
C语言程序设计基础知识点概括 C语言程序设计基础知识点1.函数是C语言的基本构成单位.main函数是C语言程序的唯一入口.2.C语言程序开发过程. 编译过程:将以.c或.cpp结尾的源程序文件经过编译 ...
- JavaEE权限管理系统的搭建(一)--------项目中用到的知识点概括
转战Java有一段时间了,.net 已不再开发的新的工程,基本上在维护,最近大半年时间在学习Java,今天抽空将学习的到的知识,应用到了一个权限管理系统的小项目中,特此记录一下.代码如有不对之处,希望 ...
- HTML知识点概括——一篇文章带你完全掌握HTML
HTML知识点概括 前端三件套分别是HTML3,CSS5,JavaScript 稍微介绍一下W3C标准: 结构化标准语言(HTML) 表现标准语言(CSS) 行为标准(DOM,JavaScript) ...
- k近邻法(KNN)知识点概括
分类一般分为两种: 积极学习法:先根据训练集构造模型,然后根据模型对测试集分类 消极学习法:推迟建模,先简单存储训练集,等到给定测试集时再进行建模,如KNN算法. 1. 简述 KNN的核心思想就是:物 ...
- vue基本知识点概括
目录 Vue 渐进式 JavaScript 框架 一.走进Vue 1.what -- 什么是Vue 2.why -- 为什么要学习Vue 3.special -- 特点 4.how -- 如何使用Vu ...
- 初次接触GWT,知识点总括
初次接触GWT,知识点概括 前言 本人最近开始研究 GWT(Google Web Toolkit) ,现将个人的一点心得贴出来,希望对刚开始接触 GWT的程序员们有所帮助,也欢迎讨论,共同进步. 先说 ...
- 知识点回顾——C语言知识点复习梳理,看看你是不是都完全掌握了
前段时间,我分享了关于C语言的一些必备知识点,感兴趣的朋友可以查看我的往期文章,或是关注公众号c语言进阶之路,查看次条文章,或搜索关键字"编程小白基础必备",就能查看相关文章了. ...
- CSS基本知识点——带你走进CSS的新世界
CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...
- java 环境配置 及java 历史
知识点概括:1 Java 的历史 2 JDK 的配置 3 文件的编译与执行 ...
随机推荐
- Go语言里的slice
1.切片是基于数组做的一层封装,灵活能够自动扩容. 2.切片的初始化方法 ①直接创建 ②基于已有的数组或切片 ③使用make来创建一个切片 第一个5是切片的大小 第二个5是切片的容量 3.基本操作 ① ...
- macTypeError: slice indices must be integers or None or have an index method
一般是由于Numpy的版本太高了(1.12对此进行了调整),有的时候传入numpy array里面的索引可能是浮点数,这个时候最好检查一下索引强制转换为int类型 或者安装低版本的numpy sudo ...
- 【BZOJ4030】[HEOI2015]小L的白日梦
[BZOJ4030][HEOI2015]小L的白日梦 题面 BZOJ 洛谷 题解 要求的是最小的不开心连续段的期望. 然后发现自己就不会做了. 然后就可以来抄题解啦. 首先来猜性质: 第一个,一定是按 ...
- 熵值法 [异质指标同质化]中-Matlab 数据归一化预处理 mapminmax函数
一.mapminmax Process matrices by mapping row minimum and maximum values to [-1 1] 意思是将矩阵的每一行处理成[-1,1] ...
- (十) 编写UVC程序
目录 编写UVC程序 流程简述 11个ioctl函数 查询属性 VIDIOC_QUERYCAP 枚举格式 VIDIOC_ENUM_FMT 查询当前格式 VIDIOC_G_FMT 尝试某种格式 VIDI ...
- 002 网上看的unity学习路线
- MarkDown里面的Emoji表情
我才发现MarkDown里面可以使用一些Emoji表情,好玩,以后写博客的趣味性大大增加 想看全部的就去这里找https://www.webfx.com/tools/emoji-cheat-sheet ...
- 【转载】C++ STL快速入门
https://www.cnblogs.com/skyfsm/p/6934246.html
- JavaScript 修改 CSS 伪类属性
背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...
- PMP知识点(四)——项目管理计划的内容
项目管理计划([4.2制定项目管理计划]的输出) 包含三个基准和十三个子计划和一些其他内容 三个基准:成本基本.进度基准.范围基准 其中范围基准([5.4创建WBS]的输出)包含了:项目范围说明书.W ...