理解BFC

BFC（Block Formatting Context）块级格式化上下文
BFC是一个名词，是一个独立的布局环境，在这布局环境中，盒元素从顶端垂直排列，两个盒元素之间的垂直距离由双方的margin决定，在同一个BFC中，两个相邻的块级元素垂直外边距会产生折叠。同一个BFC中元素的布局不受外界元素布局的影响（利用此特性消除浮动）。

生成BFC方式：

1. 设置元素浮动float不为none;(比如float:left；float:right )
2. position:absolute或者fixed
3. display:inline-block，flex或者inline-flex
4. overflow不为visible

开启BFC的作用

1. 解决相邻元素的外边距合并；父子元素边距的合并；空元素上边距和下边距的合并
2. 解决浮动带来的高度塌陷问题

案例1

html结构如下:

<div class="box1"></div>
<div class="box2"></div>

CSS样式设置：

   .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 80px;
        }
   .box2{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 100px;
        }

相邻元素外边距重叠.png

box1box2相邻，同时设置外边距，实际外边距取值为两者中较大值，开启BFC解决问题：

.box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 100px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 100px;
            float: left;/*元素浮动开启BFC*/
        }

边距200px的相邻元素

box2设为float：left浮动元素开启BFC解决相邻元素边距合并问题，对于相邻元素的边距重叠问题这里设置overflow：hidden无法解决。

案例2.

html结构如下

<div class="content">
    <div class="child">
    </div>
</div>

CSS样式为：

.content{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
 .child{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 100px;
        }

父容器content包含子元素，设置子元素的上外边距为100px，显示结果如下：

父子元素垂直外边距重叠.png

按CSS的设置本是，子元素的上边界距离父容器的上边界100px,显示的及结果是整个父容器距离body边界距离100px。
设置overflow：hidden开启BFC解决外边距重叠问题：

.content{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;/*开启BFC*/
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 100px;

仅子元素外边距100px

案例3

父容器中包含浮动元素导致高度塌陷

<div class="content">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.content{
            width: 400px;
            margin: 100px auto;
            border: 1px solid red;
            background-color: #2B81AF;
        }
        .content li{
            float: left;
        }

列表左浮，父容器高度塌陷

content的div高度塌陷，开启BFC可解决浮动带来的高度塌陷问题

.content{
            width: 400px;
            margin: 100px auto;
            border: 1px solid red;
            overflow:hidden;/*开启BFC*/
            background-color: #2B81AF;
        }
        .content li{
            float: left;
        }

父容器高度被列表撑开

使用开启BFC的方法解决浮动带来的高度塌陷问题会引发其他问题，最好还是使用以下方式

.clearfix:before,
.clearfix:after{
                content:"";
                display:table;
                clear:both;
              }