一、什么是BFC？

BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

二、BFC的生成

  1. 浮动元素
  2. 绝对定位元素
  3. overflow值不为visible的块级盒子
  4. 当然，root元素会自动生成一个BFC，这个应该很好理解,毕竟需要一个根BFC来布局

    三、BFC环境下的执行规则

  1. 在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的。每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反）
  2. 相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。从而导致了经典的外边距折叠问题，而发生折叠的主要原因是因为他们两个块级盒子在同一个BFC的环境下，解决办法是让他们俩个不在同一个BFC就ok啦。
  3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

例子：经典浮动元素的塌陷问题。我们知道，一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。下例中一旦内部的红色盒子浮动，蓝色盒子就无法被撑起，高度会变成0。原因就是因为浮动元素创建了一个新的BFC，红色盒子成为了一个独立的容器，不会影响到外面的父元素了。它的定位规则不再受制于这个父元素了。只要在在父元素加上overflow:hidden可以清除浮动，原因就是overflow:hidden可以生成一个新的BFC，而这个浮动的子元素，被它所包含了，从而成为一个独立容器，它的float外溢不了了，外面的元素不再受其浮动的影响，从而达到了清除浮动的作用。

  1. <style>
  2. .蓝色{
  3.     width:150px;
  4.     background:#ADD9E6;
  5.     margin:20px 0;
  6. }
  7. .红色{
  8.     width:100px;
  9.     height:100px;
  10.     background:#FFCCCC;
  11.     margin:20px 0;
  12.     //float:left;
  13. }
  14. </style>
  15. <div class="蓝色"><div class="红色"></div></div>

E1B724AD-200E-4dcb-8F26-08E59D5824EA.png

四、BFC的常规作用

  1. 解决外边距重叠
  2. 解决子元素浮动，父元素高度塌陷

  3. 解决浮动元素周围文字环绕问题

    1. <style>
    2. .outer {
    3.  width: 400px;
    4.  overflow: hidden;
    5.  background-color: #eee;
    6. }
    8. .float {
    9.  width: 200px;
    10.  height: 100px;
    11.  background-color: #1c88d3;
    12.  float: left;
    13.  margin-right: 20px;
    14. }
    16. .text {
    17.  /* 创建BFC环境*/
    18.  overflow: auto;
    19. }
    20. </style>
    21. <div class="outer">
    22. <div class="float">I am a floated element.</div>
    23. <div class="text">
    24. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto corporis, deleniti dicta dolores eum expedita
    25. explicabo ipsum magni numquam porro provident quae quam quas quibusdam repellendus sed unde voluptate
    26. voluptatibus.
    27. </div>
    28. </div>

    给text元素创建BFC前
    2f4b7c52600c4643a7c9004508e2eb44-1.jpg
    给text元素创建BFC后
    f8f834722889409e81d8c36841903449-1.jpg