(7) CSS基礎篇 Float

發表於 更新於 分類於
float 排版介紹

Float

在 CSS 中，float 屬性用於讓元素在容器中浮動，從而實現文字環繞等佈局效果。這個屬性在設計響應式和流動佈局時非常有用。以下是 float 屬性的詳細解說：

float 屬性的值:

1
2
3
4
none：預設值。元素不浮動，會根據正常的文檔流來佈局。
left：元素向左浮動，元素後面的內容將會環繞在其右側。
right：元素向右浮動，元素後面的內容將會環繞在其左側。
inherit：繼承父元素的 float 屬性值。

float 文繞圖範例

清除浮動

因為當元素設定浮動後會浮起來，導致父層容器抓不到高度。清除浮動 (clear float) 可以 清除某元素前面的浮動，也就是說若我們在浮動元素後面加一個負責清除浮動狀態的元素，即可以解決因浮動而產生的問題。

  • 語法
1
2
3
clear: left; /* 只清除前面為 float: left 的浮動 */
clear: right; /* 只清除前面為 float: right 的浮動 */
clear: both; /* 清除前面所有浮動 */

清除浮動的方法：

  1. 在所有浮動元素後新增一個空白的區塊元素，並加入 clear float 屬性
1
2
3
4
5
6
<div class="container">
  <div class="box left">這是一個左浮動的盒子。</div>
  <div class="box right">這是一個右浮動的盒子。</div>
  <div style="clear: both;"></div>
  <p>這是一段文字，將會環繞在浮動元素的周圍。</p>
</div>
  1. 在父元素中新增一個 after 偽元素並加入 clear float 屬性

若父元素中浮動元素後沒有其他子元素，則可以利用偽元素來加入清除浮動，其實原理是一樣的，只是不用另外在寫一個空的元素。

1
2
3
4
5
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
1
2
3
<div class="container clearfix">
  ...
</div>