BFC创建方法、特点、用途

奇粒粒
VIP.3 渐入佳境
165 阅读3分钟

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

一、BFC

1-1、BFC介绍

BFC：块级格式上下文（Block Formatting Context）

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域

  • display为block table list-item的元素会生成块盒子，参与块级格式上下文

1-2、BFC的创建方法

  1. 根元素（html）
  2. float除了none以外的值，left / right
  3. position除了static和relative以外的值，absolute / fixed
  4. overflow除了visible以外的值 auto / hidden / scroll
  5. 元素类型（即display属性）为inline-block table-caption table-cell

1-3、BFC的特点

  1. 在同一个BFC中，盒子从顶端开始一个接着一个垂直排列，两个相邻盒子之间的垂直距离由margin决定 ，垂直方向的外边距会叠加
  • 所以，如果在一个BFC中有一个盒子是span这种行内元素，则不会垂直排列，因为块级盒子才会参与BFC
  1. 在一个BFC中，每一个盒子的左外边界margin-left会紧贴着包含盒子的容器的左边界，浮动元素也是如此
  2. 在一个BFC中，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素，则该BFC的区域不会与float元素的区域重叠 （通常用来避免文字环绕、创建自适应两列布局）
  3. BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响外部的元素 （通常用于解除外边距合并）
  4. 计算一个BFC的高度时，其内部浮动元素的高度也会参与计算 （通常用来清除浮动）

1-4、BFC的用途

1-4-1、创建BFC来避免垂直外边距叠加

  • 由同一个BFC中相邻的margin-top和margin-bottom会叠加的特点可知，为避免垂直外边距合并问题，可以将两个不同元素放在不同的BFC中解决

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
      #wrapper {
        width: 200px;
        border: 1px solid gray;
      }
      #bfc-box {
        overflow: hidden; /*创建BFC*/
      }
      #a,#b {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        color: white;
        background-color: purple;
      }
      #a {
        margin-bottom: 20px;
      }
      #b {
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="a">A</div>
      <div id="bfc-box">
        <div id="b">B</div>
      </div>
    </div>
  </body>
</html>

效果：

1-4-2、创建BFC来清除浮动

  • 由计算一个BFC的高度时，其内部浮动元素的高度也会参与计算可知：可以通过创建BFC来清除浮动（如：给父级盒子添加overflow: hidden;）
  • 这是因为，给父元素添加overflow: hidden后会使父元素变成了一个BFC，BFC在计算它的高度时候，会把浮动元素计算进去
  • 也可以给父元素添加 float: left或display: inline-block

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
      .wrapper3 {
        width: 300px;
        overflow: hidden;/*创建BFC，使得浮动元素也能参与高度计算*/
        background-color: tomato;
        border: 3px solid aquamarine;
      }
      .son {
        width: 100px;
        height: 100px;
        float: left;
        background-color: burlywood;
      }
    </style>
  </head>
  <body>
    <div class="wrapper3">
      <div class="son"></div>
    </div>
  </body>
</html>

效果：

  • 父元素未添加overflow: hidden;

  • 父元素添加overflow: hidden;

1-4-3、创建BFC避免文字环绕

  • 有时候浮动div旁边的文字会环绕它，此时可通过创建BFC来避免
  • 由一个BFC内部如果存在一个新的BFC并且存在浮动元素，则新的BFC不会与float元素的区域重叠可知

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>26-Css中的重要概念-BFC&IFC</title>
    <style>
      #wrapper2 {
        width: 400px;
        height: 200px;
        border: 1px solid seagreen;
        padding: 10px;
      }
      img {float: left; width: 100px;}
      #content {
        overflow: hidden;/*创建BFC，避免文字环绕，不受浮动元素影响*/
        background-color: springgreen;
      }
    </style>
  </head>
  <body>
    <div id="wrapper2">
      <img src="img/111.jpeg" alt="">
      <div id="content">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
        予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</div>
    </div>
  </body>
</html>
  • 未创建新的BFC，产生文字环绕：

  • 创建了新的BFC，避免文字环绕：

1-4-4、使用BFC创建自适应两列布局

  • 除了可以使用负margin来实现自适应两列布局外，还可以使用BFC创建自适应两列布局
  • 原理与避免文字环绕相同

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
      #sidebar {
        float: left;
        width: 100px;
        height: 150px;
        background-color: teal;
      }
      #content2 {
        overflow: hidden;/*形成BFC不会受到float*/
        height: 200px;
        background-color: thistle;
      }
    </style>
</head>
<body>
  <div id="wrapper3">
    <div id="sidebar"></div>
    <div id="content2"></div>
  </div>
</body>
</html>

效果：

avatar
文章
阅读
粉丝