與浮動相關的CSS屬性
本文解釋與浮動相關的CSS屬性。
您可以學習float和clear屬性的用途與語法。
YouTube Video
預覽的HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 <section style="height: auto; color: black;">
38 <header><h4>float: right</h4></header>
39 <section class="sample-view">
40 <div class="float-right">float right</div>
41 <div class="content">
42 <p>
43 paragraph 1-1
44 paragraph 1-2
45 </p>
46 <p>paragraph 2</p>
47 </div>
48 <div class="clearfix"></div>
49 </section>
50 </section>
51 </article>
52 </main>
53</body>
54</html>與浮動相關的CSS屬性
float和clear屬性
1.content {
2 width: 300px;
3 height: 100px;
4}
5
6.content p {
7 background-color: lightblue;
8 margin: 10px;
9}
10
11.float-left {
12 float: left;
13 width: 150px;
14 margin-right: 20px;
15 background-color: lightblue;
16}
17
18.float-right {
19 float: right;
20 width: 150px;
21 margin-right: 20px;
22 background-color: lightblue;
23}
24
25.clearfix {
26 clear: both;
27 display: none;
28}float是CSS屬性之一，用於將元素在父元素內浮動到左側或右側，允許其他元素環繞。float屬性通常用於將圖像或框元素排列在文字周圍，但隨著flex和grid這類新布局方法的流行，其使用已減少。
- 在
float-left類中，float屬性被設置為left。應用的元素將浮動到父元素的左側，而下一個元素將環繞到右側。 - 「float-right」類別將「float」屬性設為「right」（右側）。被套用的元素會漂浮到其父元素的右側，接下來的元素會在左側環繞排布。
- 在
clearfix類中，clear屬性被設置為both。使用此類可以防止下一個元素環繞浮動元素。
如何使用float
值
left：使元素浮動到左側，允許其他元素環繞在右側。right：使元素浮動到右側，允許其他元素環繞在左側。none：這是預設值，不會使元素浮動。inherit：從父元素繼承float屬性值。
clear屬性
- 使用
float時，下一個元素可能會環繞浮動的元素。為了防止這種情況，使用clear屬性。clear的值如下：。left：避免元素浮動到左側。right：避免靠右浮動的元素。both：避免靠左和靠右浮動的元素。none：允許元素可隨意浮動。這是默認值。
注意事項
- 使用
float時，可能會出現父元素的高度忽略浮動元素高度的問題。為了避免此問題，可對父元素使用clearfix技術或設置overflow: hidden;。 - 在響應式設計或複雜的佈局中，
float的處理可能比flex或grid更困難，因此建議使用flex或grid。
總結
float 是一種舊技術，用於讓元素向左或向右浮動，允許文字或其他元素環繞，仍偶爾用於簡單佈局或圖片環繞。然而，為了實現更靈活且更容易的佈局，建議使用 flexbox 或 grid。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。