home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ cssFloat ของ HTML DOM Style: การจัดตำแหน่งลอย

คุณสมบัติ cssFloat (JavaScript property name) เทียบเท่ากับ CSS float ใช้สำหรับกำหนดหรือดึงค่าการจัดตำแหน่งแนวนอนขององค์ประกอบ (Float Left/Right)

ไวยากรณ์ (Syntax)

object.style.cssFloat = "left|right|none|initial|inherit"

หมายเหตุ: ใน JavaScript ใช้ cssFloat (ไม่ใช่ float เพราะ float เป็น reserved word) แต่ใน CSS ใช้ float

ค่าที่รองรับ

ค่าคำอธิบาย
noneไม่ลอย (ค่าเริ่มต้น)
leftลอยไปทางซ้ายสุดของพาเรนต์
rightลอยไปทางขวาสุดของพาเรนต์
initialตั้งค่ากลับเป็นค่าเริ่มต้น
inheritสืบทอดจากพาเรนต์

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    height: 50px;
    width: 50px;
    margin: 5px;
    float: left;
    background-color: rebeccapurple;
  }
  div + p {
    height: 70px;
    color: red;
    border: 2px solid #b8860b;
    padding: 10px;
  }
</style>
<script>
  function changeFloat() {
    document.getElementById("DIV1").style.cssFloat = "right";
    document.getElementById("Sample").innerHTML = "องค์ประกอบ div จะลอยไปทางขวาแล้ว";
  }
</script>
</head>
<body>
<div id="DIV1"></div>
<p>นี่คือย่อหน้าตัวอย่าง บรรทัดที่สอง บรรทัดที่สาม</p>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติ float ของ div ด้านบน</p>
<button onclick="changeFloat()">เปลี่ยน Float</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: กระบวนสี่เหลี่ยมม่วงลอยซ้าย ข้อความรอบขวา
หลัง: กระบวนสี่เหลี่ยมม่วงลอยขวา ข้อความรอบซ้าย

การทำงานของ Float (Visual)

float: left                    float: right
┌─────────┐                    ┌─────────┐
│  BOX    │  Text wraps...     │  BOX    │
└─────────┘  around here       └─────────┘
                              Text wraps around here

ปัญหาที่พบบ่อยและวิธีแก้

1. Container Collapse (พาเรนต์สูง 0)

พาเรนต์ที่มีลูก float ทั้งหมด จะสูง 0

/* Clearfix - วิธีคลาสสิก */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Modern way - แนะนำ */
.container {
  display: flow-root;      /* สร้าง BFC ใหม่ */
  /* หรือ */
  overflow: auto;          /* แตกต่างเรื่อง scrollbar */
}

2. Clear Property

ใช้ clear: left|right|both บนองค์ประกอบถัดไป เพื่อเลื่อนลงใต้ float

สมัยใหม่: ใช้ Flexbox/Grid แทน Float

Float (เก่า)Flexbox/Grid (ใหม่)
ซับซ้อน ต้อง clearfixง่าย ไม่ต้อง clearfix
จัดกึ่งกลางยากjustify-content/align-items
Equal height columns ยากอัตโนมัติ (stretch)
Source order ผูกมัดorder property ควบคุมได้

การใช้งาน Float ที่ยังเหมาะสม

  • Text wrapping รอบรูปภาพ (Magazine layout)
  • Drop caps (ตัวอักษรแรกใหญ่ ลอยซ้าย)
  • Layout เล็กๆ น้อยๆ ที่ไม่ซับซ้อน

การรองรับเบราว์เซอร์

รองรับทุกเบราว์เซอร์ (IE4+)