前言：

在前端的根底中，CSS的BFC是一个重要的概念，也是很多大厂考查前端根底比问的一个问题，很多时候咱们都是晓得这个概念，然而具体是什么作用，上面请大家耐着性子看完这篇文章置信会有一些播种的。

在开始之前 咱们先带着几个问题登程。

  • 什么是BFC？
  • 触发BFC的条件是什么
  • BFC能干什么？
  • 什么场景须要应用BFC

什么是BFC？

BFC的全称为块格式化上下文（Block Formatting Context，BFC）

在MDN中具体的阐明了BFC是Web页面中可视CSS渲染的一部分，是块盒子布局过程中产生区域，也是浮动元素与其余元素的交互区域。

是不是有些不懂？文档是写的比拟官网。然而咱们齐全能够了解为所谓的BFC就是CSS布局的一个概念，是一个区域换句话说能够了解为一个黑盒子。BFC的外部元素布局与内部互不影响，通过一些条件来触发BFC，从而实现布局上的需要或者解决一些问题。

触发BFC的条件是什么?

说到触发的条件就不得不说道当初的文档流的模式，目前分为三大类：

一般流

其中一般流很好了解就是页面从上到下，从左到右进行排列展现，如果在块级格式化上下文中，他们是竖着排列的，反之在行内格式化上下文外面，他们是横着排列的。

浮动流

左浮动的元素尽量靠左、靠上，反之右浮动同理。

定位流

应用相对定位和浮动定位的话都会脱离文档流，然而不会影响惯例流的布局，同样也不会进行文档流占位。

触发的条件：
  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 相对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格题目（元素的 display 为 table-caption，HTML表格题目默认为该值）
  • ....
    详情：MDN巴拉巴拉一大推。最好把加粗的记住比拟适合。
触发的作用：
属于同一个BFC的两个相邻的容器高低的margin会重叠。且会取间距最大的值。(敲黑板，是不是面试中遇到过？)

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title></head><style>    .box{        width: 100px;        height: 100px;        background: red;        margin-bottom: 10px;    }    .box1{        width: 100px;        height: 100px;        background: blue;        margin-top: 60px;    }    .box1-1{        /*overflow: hidden;*/        /*display:flow-root;*/    }</style><body>    <div class="box"></div>    <div class="box1">        <div class="box1-1"></div>    </div>    <script>    </script></body></html>

起因：两个元素都属于HTML根元素，BFC的个性1规定 “属于同一个BFC的两个相邻容器的高低margin会重叠”。

计算BFC高度时浮动元素也参于计算
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title></head><style>    .box {        height: 200px;        width: 200px;        background: #ccc;        float: left;        margin: 10px    }    .box1 {        height: 200px;        width: 200px;        background: #ccc;    }    .container {        background-color: red    }</style><body>    <div class="container">        <div class="box"></div>        <div class="box"></div>    </div>    <script>    </script></body></html>

起因：当父元素没有设置高度的时候，子元素设置的float不等于none，就会引发BFC的个性、请看第二条、父元素的高度塌陷。

BFC的区域不会与浮动容器产生重叠

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title></head><style>    .box {        height: 200px;        width: 200px;        background: #ccc;        float: left;    }    .box1 {        height: 200px;        background: #f7aeae;    }    .container {    }</style><body>    <div class="container">        <div class="box"></div>        <div class="box1"></div>    </div>    <script>    </script></body></html>

起因：左侧元素浮动，脱离了文档流。

对立解决

能够采纳MDN的flow-root属性，给父元素设置display: flow-root，一个新的 display 属性的值，它能够创立无副作用的 BFC。在父级块中应用 display: flow-root 能够创立新的 BFC。当然也要记得他的兼容

当然还有其余很多的形式，比如说overflow:hidden、display: inline-block 都能够达到革除浮动的成果，具体的实现还须要依据业务进行甄别

总结

BFC是格式化上下文的一个黑盒子是CSS布局中的一个概念办法，触发BFC有很多的形式 它能够解决：margin互相重叠、浮动高度塌陷、浮动元素重叠等问题，在日常的开发中堪称必不可少。

你学废了吗？