Articles
แนะนำ CSS
คุณสมบัติ CSS ที่เกี่ยวข้องกับ float

คุณสมบัติ 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        </article>
38    </main>
39</body>
40</html>

คุณสมบัติ CSS ที่เกี่ยวข้องกับ float

คุณสมบัติ float และ clear 

 1.float-left {
 2    float: left;
 3    width: 150px;
 4    margin-right: 20px;
 5    background-color: lightblue;
 6}
 7
 8.content {
 9    width: 300px;
10    height: 100px;
11}
12
13.content p {
14    background-color: lightblue;
15    margin: 10px;
16}
17
18.clearfix {
19    clear: both;
20    display: none;
21}

float เป็นหนึ่งในคุณสมบัติ CSS ที่ใช้ในการจัดลอยองค์ประกอบไปที่ด้านซ้ายหรือขวาขององค์ประกอบพาเรนต์ โดยให้องค์ประกอบอื่นล้อมรอบได้ คุณสมบัติ float มักถูกใช้ในการวางภาพหรือกล่ององค์ประกอบรอบข้อความ แต่การใช้งานลดลงเนื่องจากวิธีการเลย์เอาต์แบบใหม่ๆ เช่น flex และ grid ได้รับความนิยม

  • ในคลาส float-left คุณสมบัติ float ถูกตั้งค่าเป็น left องค์ประกอบที่ใช้งานอยู่จะลอยไปทางด้านซ้ายขององค์ประกอบพาเรนต์ และองค์ประกอบถัดไปจะล้อมรอบไปทางขวา
  • ในคลาส 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 ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้