塊格式化上下文（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以後：