定義

一個浮動盒會向左或右移動，直到其外邊（outer edge）挨到包含塊級沿或者另一個浮動盒的外邊。如果存在行盒，浮動盒的外top(邊)會與當前行盒的top（邊）對齊 如果沒有足夠的水平空間來浮動，它會向下浮動，直到空間適合或者不會再出現其他浮動了
因為浮動（盒）不在普通流內，在浮動盒之前或者之后創建的未定位的（non-positioned)塊盒會豎直排列，就像浮動不存在一樣。然而，接著（next to)浮動（盒）創建的當前及后續行盒會進行必要的縮短，為了給浮動（盒）的margin box讓出空間。

脫離普通流

普通流是什么？
代碼
浮動元素意義上不是真正的脫離文檔流，和absolute不一樣。

兩個特性：

1. 塊級元素設置浮動寬度可以收縮
2. 行內元素設置浮動，擁有塊級的特性，可以設置margin,padding.

浮動的使用場景

1. 兩欄布局
   左側固定寬度，右側自適應
   代碼
   右側固定寬度，左側自適應
   代碼

2. 三欄布局
   兩側寬度固定，中間自適應寬度
   

   image.png
   
   注意：順序問題

通過浮動實現導航條

1.左浮動導航條
代碼
2.右浮動導航條
代碼

浮動的副作用：

1. 對后續元素位置產生影響
   代碼

2. 父容器高度計算出現問題
   代碼

總結：如果一個元素里只有浮動元素，那它的高度會是0。如果你想要它自適應即包含所有浮動元素，那你需要清除它的子元素。一種方法叫做clearfix ，即clear一個不浮動的 ::after 偽元素。

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

代碼

清除浮動

clear既可以用于浮動又可以用于非浮動

當應用于非浮動塊時，它將非浮動塊的邊框邊界移動到所有相關浮動元素外邊界的下方，這個非浮動塊的垂直外邊距會折疊。
當應用于浮動元素時，它將元素的外邊界移動到所有相關的浮動元素外邊框邊界的下方。
這會影響后面浮動元素的布局，后面的浮動元素的位置無法高于它之前的元素。（參考mdn)

1. clear:left;要求該盒的top border邊位于源文檔在此之前的元素形成的所有左浮動盒的bottom外邊下方
   代碼

2. clear:right;要求該盒的top border邊位于源文檔中在此之前的元素形成的所有右浮動盒的bottom外邊下方
   代碼

浮動和負邊距
兩個浮動元素，如果因放不下導致其中一個下移，對下移的元素設置負margin值大于自身的寬度可以其上移。
代碼