今天在這裡跟大家分享css基礎最核心的部分，浮動和定位。話不多說，直接上乾貨！

一、浮動

• 定義：定位元素是相對於其正常位置應該出現的位置。定位元素的位置是相對於自身、父級元素位置、其他元素以及瀏覽器視窗本身的位置。
• 定位主要分為文檔流定位、浮動、相對定位、絕對定位、固定定位
• 浮動主要解決的是行內元素在一行內顯示的問題
• 屬性：float  left表示左浮動  right表示右浮動
• 浮動的問題：
  • 浮動元素是脫離文檔流的（不占據頁面空間）
  • 浮動只能往左浮動或右浮動，或者停靠在以及浮動元素的邊緣上
  • 浮動元素一定要有包含框（父元素）
  • 浮動元素預設不會換行，除非包含框的寬度不足以放下所有的浮動元素，那麼後面的元素就會預設換行。
  • 浮動元素的高度最好要保持一致，如果不一致就會浮不上去，出現問題。
  • 如果多個快元素需要在一行內顯示，一定要全部都浮動。
  • 元素一旦浮動後，就會快元素（脫離文檔流的元素也會變成快元素）。
  • 元素一旦浮動，那麼他的寬度就會變成自適應。
• 浮動造成包含框高度塌陷的問題：
  • 註釋：當一個父元素裡面的所有子元素都浮動，且父元素沒有設置高度，這個時候由於浮動元素脫離文檔流，所有造成父元素中沒有內容撐開高度。
• 清除浮動帶來的影響：
  • 屬性：clear  不是真正的解決問題，只是解決佈局混亂的問題。
  　屬性值：　　
  • left  清除元素左浮動所帶來的影響
  • right  清除元素右浮動所帶來的影響
  • both   清除元素左右浮動所帶來的影響
• 清除浮動的方法：解決包含框高度塌陷的問題。
  • 手動設置包含框的高度
  • overflow：hidden撐開父元素的高度
  • 父元素內部最後加一個空的快元素，設置clear：both
  • 內容生成：可以通過向某個元素的前面後者後面加入一個標簽

　　　　　　　　元素：before {

　　　　　　　　content：“插入元素的文本內容”

　　    　　　　   width：；

　　　　　　　   height：；

　　　　　　　   background：；

　　　　　　　　}

二、定位

• 定義：定位主要分為文檔流定位、相對定位、絕對定位、固定定位。
屬性：position
• static表示的是靜態定位（文檔流定位）
•  relative表示的是相對定位
• absolute表示的是絕對定位
•  fixed表示的是固定定位
• 何為定位元素：position屬性為relative、absolute、fixed。元素定位後，只是讓元素可以移動了，真正實現讓元素位置的移動，需要配合位移屬性。
• 位移屬性：
  • left：距離定位基點左邊的距離；正值往右跑，負值往左跑。
  • right：距離定位基點右邊的距離；正值往左跑，負值往右跑。
  • top：距離定位基點上邊的距離；正值往下跑，負值往上跑。
  • bottom：距離定位基點下邊的距離；正值往上跑，負值往下跑。
• 屬性單位：px或者百分比
• 註意：
  • 一般情況下水平方向和垂直方向位移屬性只有一個方向值只有一個
  • 如果left  right同時出現，以left為準
  • 如果top  bottom同時出現，以top為準

重點：

• 相對定位：
  • 定位基點：基於當前元素未移動前的位置
  • 註意：移動後依然占據著空間，沒有脫離文檔流。
  • 使用場景：微調元素位置；配合絕對定位
• 絕對定位：
  • 方向值
    • top：距離定位基點最上邊的距離
    • bottom： 距離定位基點最下麵的距離
    • left：距離定位基點最左邊的距離
    • right：距離定位基點最右邊的距離
  • 定位基點：距離最近的已經定位的祖先元素，如果沒有預設Html/body。一般定位基點都是加相對定位的。
  • 註意：絕對定位會讓元素脫離文檔流，不占據頁面空間，且會變成快元素，寬度會變成自適應。
  • 使用場景：常用於各種彈出框和頁面佈局。
• 固定定位：
  • 定位基點：頁面可視區
  • 備註：其他的跟絕對定位一樣，也會脫離文檔流，也會變成快元素，寬度會變成自適應。
  • 使用場景：頁面側邊欄

　完結！