CSS - 浮動

發表於 更新於

浮動 - float

浮動（float）屬性的初衷是希望用來設計「文繞圖」，但是，技術始終來自創意，網頁設計師天馬行空的想法，讓 float 屬性有了新的出路，設計師發現原來浮動厲害的很，可以用來佈局設計版型，也因此一股「浮動流」旋風式颳起，在彈性盒（flex box）穩定前，浮動是排版布局的好幫手。

特性

  • 浮動元素會影響排版，它會進入浮動層，後方元素的區塊部分會顯示在它的下方，而內容會圍繞著浮動元素。
  • 有可能會造成父元素高度崩塌。
  • 只有左邊或右邊的設定，沒有中間。
  • 具有內容包覆性，並且讓元素區塊化（block-level）。
  • BFC（Block formatting context）家族之一。

語法

/* 浮動 */
.float {
  /* right */
  float: left;
}

/* 清除浮動 */
.clear {
  /* left、right */
  clear: both;
}