什么是BFC

BFC为块级格式化上下文属于普通流，是一块独立渲染的区域，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

BFC的特性与作用

可以避免外边距重叠

如下外边距重叠:

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 80px;
        }
     <style> 
     <body>
        <div class="box"></div>
        <div class="box1"></div>
    </body>

效果图：

重叠.png

本应该上下两个div间距为180px,但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。

解决办法:

把其中一个div包裹在另一个容器box2中，用overflow: hidden触发box2的BFC

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 80px;
        }
        .box2 {
            overflow: hidden;
        }
     <style> 
     <body>
        <div class="box2">
            <div class="box"></div>
        </div>
        <div class="box1"></div>
    </body>

效果图：

去除重叠.png

清除浮动

使用带clear属性的空元素 在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

.box {
  background-color: red;
  border: solid 1px black;
  }

.box img {
  float: left;
  }

.box p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="box">
<img src="logo.jpg" />
<p>hello</p>
<div class="clear"></div>
</div>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.box {
  background-color: red;
  border: solid 1px black;
  overflow: hidden;
  }

.box img {
  float: left;
  }

.box p {
  float: right;
  }

<div class="box">
<img src="logo.jpg" />
<p>hello</p>
</div>

浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

利用BFC解决包含塌陷

当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。

原本，正确的显示方式，应该是粉色盒子与红色盒子的顶部距离为50px，但是由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这个时候，就可以触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。

BFC可以阻止标准流元素被浮动元素覆盖

        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box1 {
            height: 300px;
            background-color: aqua;
        }
        
        
        <div class="box"></div>
        <div class="box1"></div>

以上情况，红色盒子浮动，蓝色盒子时标准流，默认情况下，浮动元素覆盖了标准流元素。但是，如果将蓝色盒子的BFC触发，那么情况将有所变化。

        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box1 {
            height: 300px;
            background-color: aqua;
            overflow: hidden;
        }
        
        
        <div class="box"></div>
        <div class="box1"></div>

当蓝色盒子触发了BFC之后，浮动元素再也不能覆盖它了，而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应

触发BFC

并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。

触发BFC的条件

根元素默认就是一个bfc
float的值不为none时触发
position定位：absolute、fixed这两个值触发
设置overflow，值不为visible时触发
display：值为table-cell、flex、inline-block、inline-flex、table-caption时触发。

总结

一个BFC区域只包含其子元素，不包括其子元素的子元素。

并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

BFC是什么？