คุณสมบัติ CSS ที่เกี่ยวข้องกับ float
บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับ float
คุณสามารถเรียนรู้เกี่ยวกับการใช้งานและไวยากรณ์ของคุณสมบัติ 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
คุณสมบัติ 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ไปทางขวาองค์ประกอบที่นำไปใช้จะลอยอยู่ทางด้านขวาขององค์ประกอบแม่ และองค์ประกอบถัดไปจะล้อมรอบทางด้านซ้าย - ในคลาส
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
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย