BFC

1.两个概念：

包含块：包含浮动元素的父元素块。

浮动元素：脱离了正常的文档布局流，向左（右）靠近包含块外边框显示，这样也会出现文字围绕。

BFC:块级格式化上下文，它是一个独特的块，里面的元素不会影响到包含块外面，同时包含块内部有独特的布局。

2.BFC能产生的条件

2.1 body 根元素：例如：

<style>
    div{
      width: 100px;
      height: 100px;
      background: lightblue;
      margin: 100px;
    }
</style>
<body>
    <div></div>
    <div></div>
</body>
<!-- body高度为300，两个div的margin合并，div之间具体为100px -->

解决之道：

<style>
    .container {
      overflow: hidden;   <!-- 通过设置overflow为hidden解决  -->
    }
    p {
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
</style>
<body>
    <div class="container">
      <p></p>
  </div>
  <div class="container">
      <p></p>
</div>
</body>

2.2 包含块中含有浮动元素

<div style="border: 1px solid #000;">
<!--包含了浮动元素，该包含块只有2px的宽度-->
    <div style=" 100px;height: 100px;background: #eee;float: left;"></div>

解决之道：包含块加属性：overflow: hidden;

解决多个浮动元素被挤下的情况.例如：

<div style="height: 100px; 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style=" 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素,  200px; height:200px; background: #eee;</div>
<!--第二个元素有部分被浮动元素所覆盖-->

解决之道：

第二个元素添加属性：overflow: hidden;

3.BFC能解决的问题

3.1 防止两个块的外边距合并

3.2 防止文字围绕

3.3 解决多个浮动元素被挤下的情况。

3.4 包含块设置BFC，可以包含浮动元素，解决包含块width=0时，使浮动孩子将会脱离页面的常规流。