什么是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. Go语言里的slice

    1.切片是基于数组做的一层封装,灵活能够自动扩容. 2.切片的初始化方法 ①直接创建 ②基于已有的数组或切片 ③使用make来创建一个切片 第一个5是切片的大小 第二个5是切片的容量 3.基本操作 ① ...

  2. macTypeError: slice indices must be integers or None or have an index method

    一般是由于Numpy的版本太高了(1.12对此进行了调整),有的时候传入numpy array里面的索引可能是浮点数,这个时候最好检查一下索引强制转换为int类型 或者安装低版本的numpy sudo ...

  3. 【BZOJ4030】[HEOI2015]小L的白日梦

    [BZOJ4030][HEOI2015]小L的白日梦 题面 BZOJ 洛谷 题解 要求的是最小的不开心连续段的期望. 然后发现自己就不会做了. 然后就可以来抄题解啦. 首先来猜性质: 第一个,一定是按 ...

  4. 熵值法 [异质指标同质化]中-Matlab 数据归一化预处理 mapminmax函数

    一.mapminmax Process matrices by mapping row minimum and maximum values to [-1 1] 意思是将矩阵的每一行处理成[-1,1] ...

  5. (十) 编写UVC程序

    目录 编写UVC程序 流程简述 11个ioctl函数 查询属性 VIDIOC_QUERYCAP 枚举格式 VIDIOC_ENUM_FMT 查询当前格式 VIDIOC_G_FMT 尝试某种格式 VIDI ...

  6. 002 网上看的unity学习路线

  7. MarkDown里面的Emoji表情

    我才发现MarkDown里面可以使用一些Emoji表情,好玩,以后写博客的趣味性大大增加 想看全部的就去这里找https://www.webfx.com/tools/emoji-cheat-sheet ...

  8. 【转载】C++ STL快速入门

    https://www.cnblogs.com/skyfsm/p/6934246.html

  9. JavaScript 修改 CSS 伪类属性

    背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...

  10. PMP知识点(四)——项目管理计划的内容

    项目管理计划([4.2制定项目管理计划]的输出) 包含三个基准和十三个子计划和一些其他内容 三个基准:成本基本.进度基准.范围基准 其中范围基准([5.4创建WBS]的输出)包含了:项目范围说明书.W ...