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. 大数据时代的图表可视化利器——highcharts,D3和百度的echarts

    大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941   ...

  2. SpringBoot2.0整合Redis

    Spring Boot2.0在2018年3月份正式发布,相比1.0还是有比较多的改动,例如SpringBoot 自2.0起支持jdk1.8及以上的版本.第三方类库升级.响应式 Spring 编程支持等 ...

  3. 基于Springboot集成security、oauth2实现认证鉴权、资源管理

    1.Oauth2简介 OAuth(开放授权)是一个开放标准,允许用户授权第三方移动应用访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方移动应用或分享他们数据的所有内容,OAu ...

  4. HTML中的Hack条件注释语句

    IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容 自IE10起,标准模式不再支持条件注释 条件注释语句中可以是HTML.CSS也可以是 ...

  5. Django 提交 form 表单

    创建 Django 的过程可以参考上一篇文章 https://www.cnblogs.com/klvchen/p/10601536.html 在 templates 文件夹下创建一个 index.ht ...

  6. python的学习笔记01_3 基本运算符 流程控制if while 字符串常用办法

    基本运算符 运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运 ...

  7. 二、Snapman多人协作电子表格之——软件下载安装与配置

    Snapman多人协作电子表格是一个即时工作系统. 一.软件下载地址 Snapman下载的官网地址:http://www.snapman.xyz 在官网下载Snapman主程序安装: snapman_ ...

  8. jQuery链式编程

    链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...

  9. python在sqlite动态创建表源码

    代码之余,将开发过程中经常用的代码片段备份一下,如下的代码是关于python在sqlite动态创建表的代码,应该能对各位有所用. import sqlite3 as db conn = db.conn ...

  10. Jmeter接口测试实战-数据传递

    Jmeter接口测试实战-数据传递 接口与接口之间没有关联的测试是缺乏意义和没有灵魂的,只有数据在不同接口之间传递才能勾画出业务场景重要的链路. 我们用较为通用的http/https协议,接口普遍返回 ...