100%會問的float？

相信你們對於float都不陌生，float:left:向左浮動，float:right:向右浮動嘛。可是，它具體是什麼狀況，什麼個意思呢？

昨天，剛學習了聖盃佈局，從而對之有了進一步的理解。

首先，讓咱們來了解下什麼是文檔流和脫離文檔流。

百度搜索過：

• 文檔流：英文原版文檔爲"normal flow"，翻譯成常規流、普通流也就更好理解它了。從直觀上理解，常規流指的是元素按照其在 HTML 中的位置順序決定排布的過程,主要的形式是自上而下（塊級元素）,一行接一行,每一行從左至右（行內元素）。如圖所示：

• 脫離文檔流：將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。如圖所示：

  

  css樣式： .item{float: left; }

昨天老師是這樣教咱們理解的:文檔流就比如咱們去食堂排隊打飯同樣，一個接着一個日後排。脫離文檔流呢，就比如隊伍中的一人被拎出來了。

那麼，咱們的float就有使元素脫離文檔流的這個效果了。

理解了以上的小知識，就讓咱們來了解一下什麼是聖盃佈局吧？

聖盃佈局:爲了提升用戶的體驗，讓最重要的東西在第一時間加載出來。正如咱們日常看到的網頁：中間是咱們須要的內容，而內容兩端，則呈現一些廣告啥的......

聖盃佈局就是利用咱們的float屬性，將咱們的「廣告」佈置在主要內容的兩側。效果如圖所示：

咱們兩側的內容left,right原本是按照文檔流的形式排列在main內容的下面的。但當咱們對left設置以下屬性:

float: left; 
     margin-left: -100%;
      position: relative;
      left: -200px;
複製代碼

咱們的left 就會位於main的左側啦；

對於right：

float: left; 
      margin-left: -200px;
      position: relative;
      left: 200px;
複製代碼

咱們的right就位於main 的右側了。

這就是所謂的聖盃佈局，這就是float的神奇之處。