Day 25 - CSS 浮動與清除 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 24

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 24 篇

Day 25 - CSS 浮動與清除

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-10-08 01:40:09

69 瀏覽

分享至

學習目標

理解 float 的用途與限制
學會使用 clear 避免元素被浮動影響
練習用浮動製作簡單的圖文排版
知道浮動在現代已漸被 flexbox 取代，但仍需理解舊專案的用法

範例程式碼

index.html

<body>
  <h1>CSS 浮動與清除示範</h1>

  <div class="container">
    <img src="https://picsum.photos/200/150" alt="範例圖片" class="float-left">
    <p>
      這段文字會環繞在圖片的右側。利用 float 可以實現圖文混排的效果。
      不過要注意，浮動會讓後續的元素脫離正常的文流。
    </p>
  </div>

  <div class="box">這是一個受浮動影響的區塊，會跑上來。</div>
  <div class="clearfix"></div>
  <div class="box">這是一個加了 clear 後的區塊，恢復正常位置。</div>
</body>

body {
  font-family: "Microsoft JhengHei", sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.box {
  width: 200px;
  padding: 20px;
  margin: 20px;
  background: #3498db;
  color: white;
  border-radius: 6px;
}

.static {
  position: static; 

.relative {
  position: relative;
  left: 30px;
  top: 10px;
  background: #2ecc71;
}

.container {
  position: relative;
  height: 150px;
  background: #ecf0f1;
  margin: 20px 0;
}

.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #e67e22;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #9b59b6;
}

.sticky {
  position: sticky;
  top: 10px;
  background: #f39c12;
  padding: 15px;
  margin: 30px 0;
}

.content {
  height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}