一、写在前面
今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。
二、何为BFC

BFC(Block Formatting Context)格式化上下文，是
web页面中盒子模型布局的CSS渲染模式，指的是一个独立
的渲染区域或者是一个隔离的独立容器。

三、形成BFC的条件

1、浮动元素，float除none以外。
2、定位元素，position(absolute, fixed)
3、display为以下其中之一的值：inline-block,table-cell,table-caption.
4、overflow除了visible以外的值(hidden,auto, scroll)

四、实践
4.1、BFC中的盒子对齐

内部的Box会在垂直方向上一个接着一个的放置。

4.2、外边距重叠
在正常的文档流中，两个兄弟盒子之间的具有由其外边距决定的，但是不是他们的外边距之和决定的，而是以较大的为准。

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
  <style>
    * {
      margin: 0px;
      padding:0px
    }
    .container {
      overflow: hidden;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box1 {
      height: 20px;
      margin: 10px 0;
      background-color: green;
    }
    .box2 {
      height: 20px;
      margin: 20px 0;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

这里我们可以看到，第一个盒子存在上边距（因为使用BFC不会造成margin穿透问题）；但是两个盒子之间的距离是20px，而不是30px，因为垂直外边距会存在折叠问题，间距以较大的为准。
此时我们就可以使用另一个特性，bfc就是页面上的一个独立容器，容器里面的子元素不会影响外部元素，此时我们就可以在其中一个子元素的外层嵌套一层div,然后设置BFC。

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
  <style>
    * {
      margin: 0px;
      padding:0px
    }
    .container {
      overflow: hidden;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box1 {
      height: 20px;
      margin: 10px 0;
      background-color: green;
    }
    .box2 {
      height: 20px;
      margin: 20px 0;
      background-color: green;
    }
    .wapper {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="wapper">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </div>
</body>
</html>

4.3、不被浮动元素覆盖
如果我们想要实现两栏布局，比如说左边固定宽度，右边不设置宽度，此时右边自适应宽度，随着浏览器窗口的大小而改变。在没有设置BFC的时候，此时就会发现浮动元素就会覆盖right的元素，但是如果我们想要实现两栏布局，此时我们可以给right的元素设置BFC，因为设置BFC会不影响外部。

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
  <style>
    .column:nth-of-type(1) {
      float: left;
      width: 200px;
      height: 300px;
      margin-right: 10px;
      background-color: red;
    }
    .column:nth-of-type(2) {
      overflow: hidden;
      height: 300px;
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="column"></div>
  <div class="column"></div>
</body>
</html>

4.4、三栏布局
左右两边固定，中间不设置宽度，因此中间的宽度自适应，随着浏览器的大小变化而变化。

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
  <style>
    .column:nth-of-type(1),
    .column:nth-of-type(2) {
      float: left;
      width: 100px;
      height: 300px;
      background-color: green;
    }
    .column:nth-of-type(2) {
      float: right;
    }
    .column:nth-of-type(3) {
      overflow: hidden;
      /*创建bfc*/
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="contain">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</body>
</html>

4.5、可以防止字体环绕
众所周知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。

但是我们如果不想让字体环绕，此时可以使用BFC,进行设置。

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
  <style>
    .left {
      width: 200px;
      height: 200px;
      background-color: green;
      float: left;
    }
    .right {
      background-color: red;
      height: 300px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div>
    <div class="left"></div>
    <div class="right">你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
  </div>
</body>
</html>

此时展现的效果就为：

4.6、BFC包含浮动的块
如果我们使用浮动，则该元素就会脱离正常的文档流，则会造成父元素高度的坍塌，此时我们可以对其使用overflow:hidden来对其设置。

BFC详解

相关文章

热门标签

最新文章