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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > BFC的作用以及flex布局的容器属性

博主信息

博文 13

粉丝 0

访问量 13740

专题推荐

更多>

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>