块格式化上下文（BFC）解决元素浮动、文字环绕问题

快格式化上下文（BFC）

解决了什么问题

1. 子元素浮动，父元素高度塌陷
2. 外边距塌陷
3. 浮动元素周围文字环绕问题

关于问题一、问题2的示例，可点击上面的MDN官方连接查看已有示例

浮动元素周围文字环绕问题

<!--style-->
<style>
    .outer {
      width: 400px;
      overflow: hidden;
      background-color: #eee;
    }
    .float {
      width: 200px;
      height: 100px;
      background-color: #1c88d3;
      float: left;
      margin-right: 20px;
    }
    
    .text { /* 不让文字环绕的条件：1. 非行内元素 2. 创建BFC*/
      overflow: auto; 
    }
</style>
 <!--html-->
<div class="outer">
    <div class="float">I am a floated element.</div> 
    <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto corporis, deleniti dicta dolores eum expedita explicabo ipsum magni numquam porro provident quae quam quas quibusdam repellendus sed unde voluptate voluptatibus.
  </div>
</div>

给text元素创建BFC之前：

给text元素创建BFC以后：