BFC的作用以及flex布局的容器属性 -

1、 BFC

问：什么是BFC？
答：BFC(Block formatting context)，中文叫“块级格式化上下文”。它在html页面中有自己独立的“王国”，它可以管理自己内部的所有元素。

下面介绍一下它的几个主要作用：

1、它可以清除浮动。通过在父级元素中设置overflow属性，达到清除浮动目的。

  <head>
    <style>
      .continer {
        border: 3px solid red;
        /* 创建BFC */
        overflow: hidden;
      }
      .box1 {
        width: 10em;
        height: 10em;
        background-color: royalblue;
        /* 使内容浮动 */
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="continer">
      <div class="box1"></div>
    </div>
  </body>

效果图：

2、不会使垂直的两个元素外边距重叠

 <style>
      .continer {
        border: 3px solid red;
        /* 创建BFC */
        overflow: hidden;
      }
      .box1,
      .box2 {
        width: 10em;
        height: 10em;
        background-color: royalblue;
        border: 1px solid;
      }
      .box1 {
        margin-bottom: 2em;
      }
      .box2 {
        margin-top: 2em;
      }
    </style>
  </head>
  <body>
    <div class="continer">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>

效果图：

3、BFC块不会与外部的浮动元素重叠

  <head>
    <style>
      .continer {
        border: 3px solid red;
      }
      .box1 {
        float: left;
      }
      .box2 {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="continer">
      <div class="box1">
        <img  src="https://img.php.cn/upload/course/000/000/001/5f59db624c2e2735.png"
        />
      </div>
      <div class="box2">
        <span
          >php中文网第十三期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
          2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
          ；4.LayUI基础与实战；5.Vue.js基础与实战php中文网第十三期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
          2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
          ；4.LayUI基础与实战；5.Vue.js基础与实战
        </span>
      </div>
    </div>
  </body>

效果图：

2、flex布局的容器属性

2.1 在css中有一种布局方式叫做flex布局，在其中有4个基本常识要知道，分别是：容器、项目、主轴与交叉轴。

如图：

2.2 容器的4个基本属性

flex-flow：用于设置主轴方向以及项目的换行方式。它有4个属性值：row水平方向、column垂直方向、wrap换行、nowrap不换行。
justify-content：将项目当作一个整体在主轴的对齐方式。它有6个属性值：start起始位置、end结束位置、center中间位置、space-between两端对齐、space-around分散对齐、space-evenly分均对齐。
align-itmes：将项目当作一个整体在交叉轴的对齐方式。他有3个属性值：tart起始位置、end结束位置、center中间位置。这里要注意的是默认单行容器中，垂直方向是没有剩余空间的。

align-content：多行容器项目在交叉轴的对齐方式。它有6个属性值：start起始位置、end结束位置、center中间位置、space-between两端对齐、space-around分散对齐、space-evenly分均对齐。

下面做一个水平方向，多行排列，水平两端对齐，垂直分均对齐的案例：

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .continer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-evenly;
    height: 20em;
    border: 2px dashed;
    margin: 1em;
    padding: 1em;
  }
  .itmes {
    border: 1px solid;
    background-color: #cccccc;
    width: 5em;
  }
</style>

效果图：