CSS รายการคอลัมน์ float

  • หน้าแรก flex-wrap
  • หน้าต่อไป font

การกำหนดและการใช้งาน

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

ถ้าปล่อยตัวประกอบที่ไม่ใช่ตัวปลอม ต้องกำหนดความกว้างแน่ชัด; ไม่เช่นนั้น พวกนั้นจะแคบมากที่สุดเท่าที่เป็นไปได้

หมายเหตุ:หากมีเพียงเว้นช่องว่างเล็กน้อยในแถวที่มีอยู่ของประโยคเพื่อปล่อยตัวประกอบที่มีการเลื่อน ตัวประกอบนี้จะข้างไปที่แถวต่อไป กระทั่งมีแถวที่มีเว้นช่องว่างเพียงพอ

ดูเพิ่มเติมที่:

การเรียน CSSการจัดตำแหน่ง CSS

คู่มือ HTML DOMคุณสมบัติ cssFloat

ตัวอย่าง

ลงเอยรอบภาพข้างขวา

img
  {
  float:right;

ทดลองด้วยตัวเอง

ระบบเขียน CSS

float: none|left|right|initial|inherit;

ค่าของรายละเอียด

ค่า การอธิบาย
left element ข้างซ้าย
right element ข้างขวา
none ค่าเริ่มต้น
inherit กำหนดให้มีคุณสมบัติ float จากตัวปลอมที่มีอยู่ของตัวปลอมต้น

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
การสืบทอด: no
เวอร์ชัน: CSS1
ระบบเขียน JavaScript: object.style.cssFloat="left"

ตัวอย่าง TIY

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

การสนับสนุนโดยเครื่องบROWSER

ตัวเลขในตารางบอกเล่าถึงสัญญาณที่เปิดใช้งานครั้งแรกของเครื่องบROWSER ที่สนับสนุนคุณสมบัตินี้เต็มทั้งหมด。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0
  • หน้าแรก flex-wrap
  • หน้าต่อไป font