浮動元素詳解

爲什麼需要浮動元素？

1. 行內元素（包括文字、input、button等等）環繞浮動元素，這也是float設計之初的目的，可以實現文字環繞圖片等效果
2. 較早時期用來進行頁面佈局，現在有了inline-block、flex、grid等等更方便的方法

浮動元素佈局原理

浮動元素會根據屬性值向左或向右浮動，浮動元素會脫離普通文檔流，進入浮動流，浮動流內的浮動元素可以左右移動，直至外邊緣碰到包含塊或其他浮動元素，會使得塊級元素無視浮動元素且行內元素環繞浮動元素（瞭解過層疊上下文的同學就會知道浮動層實際介於塊級元素層和行內元素層之間）

下面我們來看看各種浮動情況下的效果，頁面元素、效果如下：

<div class="app">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>

• 兩個子元素均爲float:left
  
  這裏我們發現：左浮動時，爲由右向左移動，且下一行元素移至上一行時同樣是由右向左

• 兩個子元素均爲float:right
  
  同理，右浮動時，爲由左向右移動，且下一行元素移至上一行時同樣是由左向右

• 僅第二個子元素爲float:right
  
  這裏我們發現：若浮動元素的上個塊級元素不爲浮動元素，其不可向上移動（上個元素爲行內或行內塊級時會上移）

清除浮動

clear:left/right/both

即不允許左/右兩邊有浮動元素，當前行上不會再又浮動元素（注意用於設置clear樣式的div不要設置float）

常用方式：

// 在需要清除浮動的元素的上側或下側添加div，並設置clear樣式
.clear{
  clear: both;
}
// 設置包含浮動元素的容器元素的僞元素
.wrapper-clear::after{
  content: '';
  display: block;
  clear: both;
}
// 設置父元素overflow: auto
// 將父元素也變爲BFC