什么是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知识点概括与总结的更多相关文章

  1. C语言程序设计基础知识点概括

    C语言程序设计基础知识点概括 C语言程序设计基础知识点1.函数是C语言的基本构成单位.main函数是C语言程序的唯一入口.2.C语言程序开发过程. 编译过程:将以.c或.cpp结尾的源程序文件经过编译 ...

  2. JavaEE权限管理系统的搭建(一)--------项目中用到的知识点概括

    转战Java有一段时间了,.net 已不再开发的新的工程,基本上在维护,最近大半年时间在学习Java,今天抽空将学习的到的知识,应用到了一个权限管理系统的小项目中,特此记录一下.代码如有不对之处,希望 ...

  3. HTML知识点概括——一篇文章带你完全掌握HTML

    HTML知识点概括 前端三件套分别是HTML3,CSS5,JavaScript 稍微介绍一下W3C标准: 结构化标准语言(HTML) 表现标准语言(CSS) 行为标准(DOM,JavaScript) ...

  4. k近邻法(KNN)知识点概括

    分类一般分为两种: 积极学习法:先根据训练集构造模型,然后根据模型对测试集分类 消极学习法:推迟建模,先简单存储训练集,等到给定测试集时再进行建模,如KNN算法. 1. 简述 KNN的核心思想就是:物 ...

  5. vue基本知识点概括

    目录 Vue 渐进式 JavaScript 框架 一.走进Vue 1.what -- 什么是Vue 2.why -- 为什么要学习Vue 3.special -- 特点 4.how -- 如何使用Vu ...

  6. 初次接触GWT,知识点总括

    初次接触GWT,知识点概括 前言 本人最近开始研究 GWT(Google Web Toolkit) ,现将个人的一点心得贴出来,希望对刚开始接触 GWT的程序员们有所帮助,也欢迎讨论,共同进步. 先说 ...

  7. 知识点回顾——C语言知识点复习梳理,看看你是不是都完全掌握了

    前段时间,我分享了关于C语言的一些必备知识点,感兴趣的朋友可以查看我的往期文章,或是关注公众号c语言进阶之路,查看次条文章,或搜索关键字"编程小白基础必备",就能查看相关文章了. ...

  8. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  9. java 环境配置 及java 历史

    知识点概括:1 Java 的历史                              2 JDK 的配置                              3 文件的编译与执行     ...

随机推荐

  1. MySQL表与表之间的关系

    表与表之间的关系 表1 foreign key 表2 则表1的多条记录对应表2的一条记录,即多对一 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以 ...

  2. 函数内部还是不要使用 strtok()

    今天在调试程序的时候,遇到一个奇怪的事情,一开始担心是代码存在内存溢出引起的,花了半个小时没找到原因. 在吃饭的时候,突然想起可能是 strtok() 引起的,查找调用的函数,果然发现在函数中使用了  ...

  3. Security+ 认证考过经验分享 802分飘过

    PART 1/考前准备 1.针对与新人.学生建议看每一节直播课程,老师会结合自己的工作工作经验讲解课程,可以帮助学生理解知识. 2.备考期间建议官方指导手册至少看两遍以上,我在结合自己的做题库时发现有 ...

  4. 第六周博客作业<西北师范大学|李晓婷>

    1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.作业要求链接:https://www.cnblogs.com/nwnu-daizh/p/10569690.htm ...

  5. 【优秀的图片后期编辑工具】Luminar 3.1 for Mac

     [简介] 今天和大家分享最新的 Luminar for Mac 3.1 版本,支持中文界面,Luminar是一款Mac上优秀的图片后期处理工具,功能类似 Photoshop Lightroom 等软 ...

  6. MySQL8.0

    序言 my.ini [mysqld] # 设置3306端口 port=3306 # 设置mysql的安装目录 basedir=D:\\DataBase\\mysql-8.0.12-winx64 # 设 ...

  7. windows 下启动运行 jar 包程序

    windows 下 运行 jar 包 java -jar XXX.jar java -server -Xms1024m -Xmx20480m -jar $JAR_NAME.jar windows 后台 ...

  8. Solr配置步骤

    1. 配置步骤说明 (1)配置Solr服务器. (2)配置SolrHome.(Solr服务的主目录,磁盘) (3)在Solr服务器中加载SolrHome. (4)java程序访问Solr服务器,实现全 ...

  9. 第31月第10天 tableview头部空白 Other Linker Flags rtmp

    1.ios10 tableview头部空白 if (@available(iOS 11.0, *)) { self.tableView.contentInsetAdjustmentBehavior = ...

  10. pythonのdjango Form简单应用。

    Form表单有两种应用场景: 1.生成HTML标签. 2.验证输入内容. 如果我们在django程序中使用form时,需要在views中导入form模块 from django import form ...