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 文件的编译与执行 ...
随机推荐
- MySQL表与表之间的关系
表与表之间的关系 表1 foreign key 表2 则表1的多条记录对应表2的一条记录,即多对一 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以 ...
- 函数内部还是不要使用 strtok()
今天在调试程序的时候,遇到一个奇怪的事情,一开始担心是代码存在内存溢出引起的,花了半个小时没找到原因. 在吃饭的时候,突然想起可能是 strtok() 引起的,查找调用的函数,果然发现在函数中使用了 ...
- Security+ 认证考过经验分享 802分飘过
PART 1/考前准备 1.针对与新人.学生建议看每一节直播课程,老师会结合自己的工作工作经验讲解课程,可以帮助学生理解知识. 2.备考期间建议官方指导手册至少看两遍以上,我在结合自己的做题库时发现有 ...
- 第六周博客作业<西北师范大学|李晓婷>
1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.作业要求链接:https://www.cnblogs.com/nwnu-daizh/p/10569690.htm ...
- 【优秀的图片后期编辑工具】Luminar 3.1 for Mac
[简介] 今天和大家分享最新的 Luminar for Mac 3.1 版本,支持中文界面,Luminar是一款Mac上优秀的图片后期处理工具,功能类似 Photoshop Lightroom 等软 ...
- MySQL8.0
序言 my.ini [mysqld] # 设置3306端口 port=3306 # 设置mysql的安装目录 basedir=D:\\DataBase\\mysql-8.0.12-winx64 # 设 ...
- windows 下启动运行 jar 包程序
windows 下 运行 jar 包 java -jar XXX.jar java -server -Xms1024m -Xmx20480m -jar $JAR_NAME.jar windows 后台 ...
- Solr配置步骤
1. 配置步骤说明 (1)配置Solr服务器. (2)配置SolrHome.(Solr服务的主目录,磁盘) (3)在Solr服务器中加载SolrHome. (4)java程序访问Solr服务器,实现全 ...
- 第31月第10天 tableview头部空白 Other Linker Flags rtmp
1.ios10 tableview头部空白 if (@available(iOS 11.0, *)) { self.tableView.contentInsetAdjustmentBehavior = ...
- pythonのdjango Form简单应用。
Form表单有两种应用场景: 1.生成HTML标签. 2.验证输入内容. 如果我们在django程序中使用form时,需要在views中导入form模块 from django import form ...