CSS当中BFC介绍

在前端当中，我们都知道标准文档流，我们在开发的时候，经常会碰到block和inline。而下文要说到的BFC就是对块级盒子的格式化。当然block级别的盒子是BFC，那么inline级别的盒子也同样存在ifc。

介绍

首先，我们先来看一下FC的概念。

 FC是Formatting Context的缩写，表示页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

而BFC的概念如下:

 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

如何生成

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

约束规则

浏览器对于BFC这块区域的约束规则如下：

  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
  • 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

之前在网上网友对于内容进行过分解，我们拿过来借鉴一下：

  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
  3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时，浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

仔细研究后你会发现，很多css的规则其实都是脱身于BFC的规则。

BFC的应用

1、防止margin重叠

在标准文档流当中，两个盒子垂直排列就会产生bfc，一旦产生bfc就会导致盒子的margin重叠。

我们可以让两个盒子处于独立的bfc当中，就可以避免产生margin重叠现象。

例如下面的例子就发生了重叠:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        div:nth-of-type(1) {

            margin-bottom:10px;

        }

        div:nth-of-type(2) {

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="d1"></div>

    <div class="d2"></div>

</body>

</html>

下面是触发了bfc之后的效果，没有发生重叠。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .d1,.d2 {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .d1 {

            margin-bottom:10px;

            border:2px solid blue;

        }

        .d2 {

            margin-top:30px;

            border:2px solid black;

        }

        .box {

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="d1"></div>

    </div>

    <div class="d2"></div>

</body>

</html>

上面代码实现的原理是通过overflow:hidden;让两个盒子处于两个bfc当中，就不会发生重叠。

2、浮动相关的问题

当一个子元素浮动之后，父元素如果没有设置高度，那么父元素会随着子元素的浮动而失去高度，这个时候我们可以给父元素触发BFC，这样父元素就会重新的包裹子元素。因为在bfc中，浮动的元素也参与高度计算。

CSS中的BFC的更多相关文章

  1. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  2. BFC？来自CSS中的BFC

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...

  3. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  4. CSS中的BFC详解

    引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...

  5. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  6. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  7. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  8. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

  9. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

  1. Redis 小白指南（二）- 聊聊五大类型：字符串、散列、列表、集合和有序集合

    Redis 小白指南(二)- 聊聊五大类型:字符串.散列.列表.集合和有序集合 引言 开篇<Redis 小白指南(一)- 简介.安装.GUI 和 C# 驱动介绍>已经介绍了 Redis 的 ...

  2. CSS3制作上下跳动动画箭头效果

    动画效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  3. Powershell Linux正式版可用，启动名称有变

    CentOS yum install powershell 但并没有powershell这个可执行文件.通过搜索可以发现在powershell目录里有pwsh可执行文件,那么以后就要用pwsh执行了. ...

  4. 重庆3Shape Dental System技术支持

    Dental System 2014中的一些新的功能:为提高生产力增添了自动冠功能软件会自动根据位置设计冠的形状,以适应周围的牙齿和拮抗剂.新的强大的用户体验优化了工作流程和一个新的重新设计的用户界面 ...

  5. 创建一个Windows服务程序与实现定时器效果

    1.创建一个Windows服务程序 一.   新建Window服务项目 二.   添加安装程序 三.   配置服务属性 四.   编写定时器代码 publicpartialclassService1 ...

  6. eclipse 开发web 项目，使用gradle 需要安装的插件

    1.Buildship Gradle 扩展 eclipse IDE 以支持使用 Gradle 构建软件.此解决方案由 Eclipse 基金会提供 2.EGradle Editor (主要用来编写gra ...

  7. 专注于C#.Net WPF软件开发-软件反编译-软件破解-逆向-靖芯科技-包括安卓APK反编译

    靖芯科技提供.Net软件开发,软件修改定制二次开发,软件破解,反编译,逆向等各项优质服务: 包括安卓APK软件反编译. 包括但不限于C#,WPF,Surface,Winform,Asp.net.JAV ...

  8. Java基础系列--09_集合2

    昨天介绍了集合的主要架构体系,今天主要的目的是学习集合的迭代器的遍历和List的特有功能. 迭代器:     概述:由于多种集合的数据结构不同,所以存储方式不同,取出方式也不同.但是他们都是有判断和获 ...

  9. 基于GPS数据建立隐式马尔可夫模型预测目的地

    <Trip destination prediction based on multi-day GPS data>是一篇在2019年,由吉林交通大学团队发表在elsevier期刊上的一篇论 ...

  10. ProxyChains 的坑, 需要关闭 sip

    之前 10.12.6 还可以的,现在升级下系统就用不了了. search下发生时sip问题. 解决方案就时要关闭这个东西; 关闭SIP reboot # 按住 option 键 # 到系统选择页面后, ...