前言

　　作为前端开发人员或者学生，你一定知道BFC这个关键词，但是你是否具体了解过什么是BFC?BFC有什么用？BFC怎么用些问题呢?本文就来总结一下相关的知识点，希望对阅读到的小伙伴在面试、学习、开发中有所帮助。

正文

　　1、什么是BFC

　　首先来看下下面的代码段1：

    <style>

      .wrapDiv {

        width: 100px;

        height: 100px;

        border: 1px solid red;

      }

      .item {

        width: 100px;

        height: 30px;

        border: 1px solid black;

      }

      .otherDiv {

        width: 200px;

        height: 200px;

        border: 1px solid yellow;

      }

    </style>

  </head>

  <body>

    <div class="wrapDiv">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

      <div class="item">4</div>

      <div class="item">5</div>

    </div>

    <div class="otherDiv">6666</div>

  </body>

　　运行结果如下：

　　为什么会产生这样的结果呢？wrapDiv的盒子的子元素为什么会显示在otherDiv上面呢，item 子元素为什么会超出父元素 wrapDiv显示呢，要想不让它超出，我们应该怎么办呢？带着这些疑问，我们先来了解一下下面的几个概念：

　　（1）css 文档流

　　css 文档流中，内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。文档流可以分为常规流、浮动流、定位流三种

　　a、常规流：

　　普通的文档流，元素默认的从左往右、从上往下排列；行内元素横着排列，块级元素竖着排列；position:static时，盒子的位置在常规流布局放置；position:relative设置了top/bottom/left/right 时，页面显示位置有便宜，但是实际占用空间还是原来常规流的位置。

　　b、浮动流

　　首先按常规流的位置出现，然后根据设置的左（右）浮动靠左、靠上（靠右、靠上）浮动；浮动会导致常规流元素环绕在它的周边，因此解决了文字环绕图片的问题，但是这样浮动元素会撑大父级元素，从而间接的影响到块级元素布局，所以就有了清楚浮动的方法（伪元素、br标签、clear属性、overflow: hidden、给父元素设置宽高、给父元素设置浮动等）。

　　c、定位流

　　这里主要指绝对定位、元素的具体位置由绝对定位的坐标组成，绝对定位的元素从常规流移除们不会影响的其他元素，绝对定位相对于上级元素中最近的一个定位为 relative\ fixed\ absolute 的元素为定位点。

　　（2）BFC

　　BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局，总之，BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

　　2、BFC有什么用，怎么触发

　　BFC块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

　　触发条件：

    1. 根元素，即HTML标签
    2. 浮动元素：float值为left、right
    3. overflow值不为 visible，为 auto、scroll、hidden
    4. display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
    5. 定位元素：position值为 absolute、fixed

　　注意：display:table 也可以生成 BFC 的原因在于 Table 会默认生成一个匿名的 table-cell，是这个匿名的 table-cell 生成了 BFC。

　　触发结果：

    1. 属于同一个 BFC 的两个相邻 Box 垂直排列
    2. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
    3. BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
    4. BFC 的区域不会与 float 的元素区域重叠
    5. 计算 BFC 的高度时，浮动子元素也参与计算
    6. 文字层不会被浮动层覆盖，环绕于周围

　　3、怎么使用BFC

　　（1）阻止margin重叠

　　我们来看下如下代码段2：

    <style>

      .first {

        width: 100px;

        height: 100px;

        border: 1px solid red;

        margin: 30px;

      }

      .second {

        width: 100px;

        height: 100px;

        border: 1px solid green;

        margin: 30px;

      }

    </style>

  <body>

    <div class="first"></div>

    <div class="second"></div>

  </body>

　　运行结果如下：

　　分析：first 和 second 两个 div 属于 html 根标签下的同一个 BFC 上下文，触发了第二条效果，同一个 BFC 中的 div 会发生 margin 重叠，因此这里我们需要将两个 div 分别设置为独立的 BFC 上下文，这里可以在两个div外层添加一层 wrap 的 div元素，分别产生独立的 BFC 上下，代码段3如下：

    <style>

      .wrap {

        overflow: hidden;

      }

      .first {

        width: 100px;

        height: 100px;

        border: 1px solid red;

        margin: 30px;

      }

      .second {

        width: 100px;

        height: 100px;

        border: 1px solid green;

        margin: 30px;

      }

    </style>

  <body>

    <div class="wrap">

      <div class="first"></div>

    </div>

    <div class="wrap">

      <div class="second"></div>

    </div>

　　结果如下：

　　（2）可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

　　当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。如下代码段4：

  <style>

    .wrap {

      height: 50px;

      border: 1px solid red;

    }

    .child {

      float: left;

      width: 100px;

      height: 100px;

      background-color: skyblue;

    }

  </style>

<body>

  <div class="wrap">

    <div class="child">

      我是浮动元素

    </div>

  </div>

</body>

　　运行结果如下：

　　分析：浮动元素超出了父元素设置的高度，这里需要清除浮动，代码段5如下：

  <style>

    .wrap {

      height: 50px;

      border: 1px solid red;

      overflow: hidden;

    }

    .child {

      float: left;

      width: 100px;

      height: 100px;

      background-color: skyblue;

    }

  </style>

<body>

  <div class="wrap">

    <div class="child">

      我是浮动元素

    </div>

  </div>

</body>

　　运行结果如下：

　　（3）自适应两栏布局，阻止元素被浮动元素覆盖

　　我们来看如下的代码段6：

    <style>

        .left {

            width: 100px;

            height: 100px;

            float: left;

            background: green;

        }

        .right {

            height: 200px;

            background: blue;

        }

    </style>

    <body>

        <div class="left">left div</div>

        <div class="right">right div</div>

    </body>

　　运行结果如下：

　　分析：left 和 right 两个div属于同一个 BFC上下文中，触发了right文字层不会被浮动层覆盖，环绕于四周的效果，我们要想实现左右两个盒子宽度自适应，高度不受其他盒子影响，这里可以设置右边盒子为单独的BFC,代码段7如下：

    <style>

        .left {

            width: 100px;

            height: 100px;

            float: left;

            background: green;

        }

        .right {

            height: 200px;

            background: blue;

            overflow: hidden;

        }

    </style>

    <body>

        <div class="left">left div</div>

        <div class="right">right div</div>

    </body>

　　运行结果如下：

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

css--BFC是什么，有什么用，怎么用？的更多相关文章

  1. CSS BFC in depth

    CSS BFC in depth BFC (Block Formatting Context) https://developer.mozilla.org/en-US/docs/Web/Guide/C ...

  2. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  3. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  4. CSS BFC学习笔记

    BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...

  5. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  6. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  7. CSS BFC（格式化上下文）深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...

  8. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  9. css BFC布局及用处

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用

  10. bfc+css

    CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素 ...

随机推荐

  1. Solution -「LOJ #6485」 LJJ 学二项式定理

    \(\mathcal{Description}\)   Link.   给定 \(n,s,a_0,a_1,a_2,a_3\),求: \[\sum_{i=0}^n\binom{n}is^ia_{i\bm ...

  2. Winds10 安装JDK8.0教程

    首先下载一个jdk,可以通过这个链接下载:https://pan.baidu.com/s/1aP6SdL8UQK_C2GvALLb6Wg也可以去官网下载:https://www.oracle.com/ ...

  3. ajax读本地文件

    前置条件: 1. 编辑器,我用的是HbuilderX,解压即食,非常美味,点击传送门. 2. jQuery.min.js,点击传送门. 简单的项目目录: a. test.html内容 <!DOC ...

  4. 软件性能测试分析与调优实践之路-Java应用程序的性能分析与调优-手稿节选

    Java编程语言自从诞生起,就成为了一门非常流行的编程语言,覆盖了互联网.安卓应用.后端应用.大数据等很多技术领域,因此Java应用程序的性能分析和调优也是一门非常重要的课题.Java应用程序的性能直 ...

  5. 企业BI应用解决方案主要包括哪些方面？

    BI的地位 在实际的BI应用过程中,很多企业对数据分析的概念仅为雏形,且业务人员往往难以了解自身数据分析的需求.这就造成很多BI需求调研在和业务人员沟通的环节,业务人员难以明确需求,这使得BI沦为一个 ...

  6. 【C# .Net GC】GC的类型与工作方式 和配置

    .net主要有两种类型垃圾回收器,也可也说是垃圾回收器的两种工作模式. GC的类型主要有两种: 工作模式是针对进程的,程序启动后就不能修改了.只能在配置文件.json .xml进行设置.但是可用通过G ...

  7. 【C# 线程】Windows系统下常见的7种I/O模型 之Overlapped I/O模型

    overview 这个字符到底是什么含义呢?其实它的意思就是当程序在等待设备操作的时候,可以继续往下做而不必阻塞到那个地方等待设备操作的返回,这就造成了程序运行和设备操作时间上的重叠.  Overla ...

  8. 小谈C#泛型

    (一)泛型的由来 泛型是CLR2.0新增的,泛型兼具可重用性,类型安全和效率.泛型的本质就是在程序第一次编译的为IL代码的时候,就会帮我们生成一个占位符,在git即时编译的时候,就会把占位符替换为真实 ...

  9. Java课程设计---学生信息管理系统需求分析及总体设计

    按照软件工程实践的原则,开发大型程序需要经历需求分析.总体设计.详细设计.编码实现.系统测试.系统维护等几个阶段. 1.需求分析 本阶段是整个软件开发过程中最重要的环节.通过了解实际运行的系统或与用户 ...

  10. Qt：QSqlQuery

    0.说明 QSqlQuery提供了执行SQL代码的方法. QSqlQuery封装了在QSqlDatabase中查询.检索数据的相关函数.它可以用来执行如SELECT.INSERT.UPDATE.DEL ...