浅谈BFC和盒模型

不努力就只能听到别人的好消息。 --网易云音乐热评

盒模型

标准盒模型和怪异盒模型

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

盒模型有 2 种：标准盒模型和 IE 盒模型，本别是由 W3C 和 IExplore 制定的标准。

标准盒子

标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width = 300 + 32 + 22 = 310px。

IE盒子

IE 盒模型认为：盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框

.box 元素所占用的实际宽度为 200px，而内容的真实宽度则是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。

现在高版本的浏览器基本上默认都是使用标准盒模型，而像 IE6 这种老古董才是默认使用 IE 盒模型的。

在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：

content-box：标准盒模型；
border-box：IE 盒模型；

那么我们回到BFC的内容上，讨论：什么是BFC？

什么是BFC？

BFC(Block Fromatting Context，即块级格式上下文),简单的来说，就是形成一个独立的、不受外界影响的区域，我们都知道CSS的(大部分)属性是可以继承的，这就造成父元素对子元素的样式造成影响，而BFC就会隔绝父元素影响，起到一个隔绝保护的作用.

BFC的作用是什么？

1. 父元素高度塌陷问题

有如下代码以及样式：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>BFC的行程</title>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
    </div>
  </body>

  <style>
    .container {
      width: 200px;
      height: 200px;
      border: 3px solid rgba(208, 109, 159, 0.77);
    }

    .inner {
      float: left;
      background-color: cyan;
      height: 100px;
      width: 100px;
    }
  </style>
</html>

具体样式如下：

按照以往的认知，子元素应该将父元素的高度撑起来，但是实则父元素高度为0，原因是子元素脱离了文档流，"相当于"不在父元素里面了

a. 解决办法

ⅰ. overflow:hidden 或overflow:auto;

ⅱ. 给父元素设置高度

ⅲ. 给父盒子末尾添加一个空盒子，并设置成清除浮动

方式有很多，可以直接在子元素的最后添加一个空白的div，也可以像使用伪类

css 复制代码

/* 清除浮动 */
.clearfix::after {
  display: block;
  height: 0;
  content: "";
  clear: both;
  visibility: hidden;
}

2. 外边距折叠

由以上盒模型可知：

当两个div一上一下排列，边距分别是是10px，12px，那么两着内容的距离是多少？新手肯定会回答22px,实则是12px，两者的边距取决于最大的那个

举个栗子🌰

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>
</body>

<style>
    .container {
        background-color: pink;
        overflow: hidden;
    }

    .inner {
        background-color: lightblue;
        margin: 30px;
    }
</style>

</html>

效果如下

形成BFC后

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="container">
  <div class="inner">1</div>
  <div class="bfc">
    <div class="inner ">2</div>
  </div>
</div>
</body>

<style>
    .container {
        background-color: pink;
        overflow: hidden;
    }

    .bfc {
        overflow: hidden;
    }

    .inner {
        background-color: lightblue;
        margin: 10px;
    }
</style>

</html>

3. 两栏布局问题

在使用左右浮动创建左右两栏布局的时候，为一侧设置背景图，会发现，我图呢？

示例：

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC的创建方式</title>

</head>

<body>
<div class="wrapper">
  <img src="" alt="666">
  <div class="text">
    <h2>BFC(Block Fromatting Context，
      即块级格式上下文)</h2>
    <p>BFC(Block Fromatting Context，
      即块级格式上下文),简单的来说，就是形成一个独立的、不受外界影响的区域，我们都知道CSS的(大部分)属性是可以继承的，这就造成父元素对子元素的样式造成影响，而BFC就会隔绝父元素影响，起到一个隔绝保护的作用.</p>
  </div>
</div>
</body>

<style>
    .wrapper {
        background: url(../../../assets/image/img.png) no-repeat;
    }

    img {
        width: 300px;
        float: left
    }

    .text {
        width: 300px;
        float: left
    }
</style>

</html>

这时候为父元素设置清楚浮动就可以了

添加给父元素添加overflow:auto这里设置hidden，scroll等也是没问题的，只要不是visible都行。

发现，可爱的猫猫回来了

怎么形成BFC？

触发条件

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文：

根元素()

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

行内块元素（元素的 display 为 inline-block）

表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）

表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）

网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

BFC渲染规则

（1）BFC垂直方向边距重叠

（2）BFC的区域不会与浮动元素的box重叠

（3）BFC是一个独立的容器，外面的元素不会影响里面的元素

（4）计算BFC高度的时候浮动元素也会参与计算

参考：

juejin.cn/post/697565...