CSS3(BFC)

1、什么是BFC

W3C 上对 BFC 的定义：

原文：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-

cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than

'visible' (except when that value has been propagated to the viewport) establish new block

formatting contexts for their contents.

译文：浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和

table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新

的块格式化上下文。
MDN 上对 BFC 的描述：

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，

是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
通俗描述
1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个
  "特异功能"。 @media screen and (max-width:768px) { /*CSS-Code;*/ } @media screen and (min-width:768px) and (max-width:1200px) { /*CSS-Code;*/ }
2. 该 "特异功能"，在默认的情况下处于关闭状态；当元素满足了某些条件后，该"特异功
  能"被激活。
3. 所谓激活"特异功能"，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

2、开启了BFC能解决什么问题

元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

3、如何开启BFC

根元素
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
伸缩项目
多列容器
column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display 的值，设置为 flow-root

4、如何解决问题1

问题点：元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。

塌陷的问题实际上就是

最上边一个元素的 margin-top 会被父元素吃掉，导致没有生效
最下边一个元素的 margin-button 元素不起作用

问题演示

我将会将原本没有处理的效果贴出来，以及处理后的的效果贴出来；

代码

markdown 复制代码

  .outer {
       width: 500px;
       background-color: #888;
}

.inner {
       width: 100px;
       height: 100px;
       text-align: center;
       line-height: 100px;

       /* 第一个元素和最后一个元素的 margin-top / margin-bottom失效了  */
       margin: 20px;

     }


     .inner:nth-of-type(1) {
       background-color: red;
     }

     .inner:nth-of-type(2) {
       background-color: yellow;
     }

     .inner:nth-of-type(3) {
       background-color: green;
     }

 <div class="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
   </div>

效果

解决方案

我们遵循的方案是，谁有问题我们就在谁的身上处理它。如果我们是 a元素出了问题，那么我们处理方案也是在a元素上；

方案1

/* 方案1 浮动 */

float: left;

方案2

/* 方案2 absolute/fixed 相对定位是不行的 */

position: fixed;

方案3

后续的效果我就不一一贴出来了，直接看代码结果即可

行内块元素

/* 方案3 行内块元素 */

display: inline-block;

方案4

行内块元素

/* 方案4 行内块元素 */

display: table;

方案5

方案5 overflow 的值不为 visible 的块元素

overflow: auto;

方案6

伸缩容器,找到他们的父亲也就是 body {display: flex;}

body {display: flex;}

方案7

多列容器

column-count: 1;

方案8

column-span 为 all 的元素（即使该元素没有包裹在多列容器中）

column-span: all;

方案9

display 的值，设置为 flow-root

display: flow-root;

5、如何解决问题2

实际是浮动产生的问题，自己浮动后，后边的元素会填充到自己原本的位置，导致后面的元素被覆盖

问题演示

代码

markdown 复制代码

 .box {
 width: 200px;
 height: 200px;

}

.box1 {
background-color: red;
/* 后面元素会跑到自己后面，影响的是后面元素 */
float: left;

}

.box2 {
         background-color: saddlebrown;
}         
      
<body>
   <div class="box box1">1</div>
   <div class="box box2">2</div>
</body>

问题点：我们看到当box1设置浮动后，box2看不到了；

解决方案

这个时候我们看到出问题的是 box2元素，那么我们处理时候也需要在box2上面做文章

方案1

使用浮动

float: left;

方案2

使用定位，我们看到也有问题，就是box2把原本的box1给覆盖了；

position: absolute;

方案3

变为行内块元素

display: inline-block;

方案4

display: table

方案5

overflow: auto

方案6

body {

display: flex;

}

方案7

column-count: 1;

方案8

column-span: all;

方案9

display: flow-root;

6、如何解决问题3

元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
我们如何设置

我们需要设置一个父容器，父容器里面设置多个子元素，父容器的高度靠子元素的高度撑开，这个时候我们设置子元素浮动，然后看到父元素高度没了

基本代码

markdown 复制代码

<title>02.浮动自己</title>
   <style>
       /* body {
      display: flex;
     } */

     .outer {
         background-color: #888;
         /* 需要设置宽度，不然看不到结果 */
         width: 800px;
         /* 解决方案 */
          /* float: left; */

          /* position: absolute; */
          /* display: inline-block; */
          /* display: table; */
          /* overflow: auto; */
          /* 父元素 */
          /* column-count: 1; */
          /* column-span: all; */
          display: flow-root;

     }

     .inner {
       width: 200px;
       height: 200px;
       text-align: center;
       line-height: 100px;
       
       /* 浮动，父元素高度没了 */
       float: left;

     }


     .inner:nth-of-type(1) {
       background-color: red;
     }

     .inner:nth-of-type(2) {
       background-color: yellow;
     }

     .inner:nth-of-type(3) {
       background-color: green;
     }
   </style>
</head>
<body>
   <div class="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
   </div>
</body>

效果

解决后的效果

解决多种方案集合

markdown 复制代码

.outer {
         background-color: #888;
         /* 需要设置宽度，不然看不到结果 */
         width: 800px;
         /* 解决方案 */
          float: left;

          /* position: absolute; */
          /* display: inline-block; */
          /* display: table; */
          /* overflow: auto; */
          /* 父元素 */
          /* column-count: 1; */
          /* column-span: all; */
          /* display: flow-root; */

     }