CSS Float

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

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

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

คุณสมบัติ CSS Float

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

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

ค่าทั่วไปสี่ค่าที่ใช้กับคุณสมบัติ float คือ:

• ซ้าย (ลอยองค์ประกอบทางด้านซ้ายของคอนเทนเนอร์)
• ขวา (ลอยองค์ประกอบทางด้านขวาของคอนเทนเนอร์)
• ไม่มี (ไม่มีการใช้ float กับองค์ประกอบ)
• สืบทอด (องค์ประกอบลอยโดยใช้คุณสมบัติ float ที่ใช้กับคอนเทนเนอร์หลัก)

การใช้งานคุณสมบัติ float ที่พบบ่อยที่สุดคือการตัดข้อความรอบรูปภาพใน CSS

ตัวอย่าง CSS Float

สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับ Stargazer Blazers . ในพื้นที่ สังคมดูดาว สโมสรต้องการมีหน้าเว็บที่สรุปประวัติองค์กรของตน หน้าเว็บนี้ควรมีคำอธิบายสั้น ๆ เกี่ยวกับสโมสรและรูปภาพของดาวที่อยู่ทางด้านซ้ายของหน้า

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เราสามารถใช้คุณสมบัติ float เพื่อสร้างหน้าเว็บนี้ได้ นี่คือโค้ดพื้นฐานที่เราจะใช้สำหรับหน้าเว็บของเรา โดยไม่ต้องใช้ float:

index.html

<div>
<p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries.
</p>
</div>

รหัสของเราส่งคืน:

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

นี่คือรหัสที่เราจะใช้เพื่อจัดตำแหน่งรูปภาพของเราทางด้านขวาของข้อความ (ซึ่งเป็นสิ่งที่สังคมดูดาวร้องขอ):

styles.css

img {
	float: right;
}

รหัสของเราส่งคืน:

มาทำลายรหัสของเรากัน ขั้นแรก เรากำหนด

ซึ่งโค้ดสำหรับหน้าเว็บของเราถูกเขียนขึ้น จากนั้นเราใช้แท็ก

เพื่อสร้างเนื้อหาข้อความ ซึ่งรวมถึงคำอธิบายเกี่ยวกับประวัติของสโมสร Stargazer Blazers ภายในแท็ก

เรายังใส่รูปภาพของดวงดาวซึ่งมีขนาด 200×200 อีกด้วย

ในไฟล์ styles.css ของเรา ซึ่งมีโค้ดสไตล์สำหรับหน้าเว็บของเรา เราใช้ float:right; คุณลักษณะเพื่อลอยภาพของเราไปทางขวาของข้อความ ดังที่คุณเห็นในตัวอย่างด้านบน รูปภาพของเราจะอยู่ทางด้านขวาของข้อความ โดยค่าเริ่มต้น รูปภาพจะปรากฏก่อนข้อความของเรา

สมมติว่าชมรมดูดาวขอให้เราจัดตำแหน่งรูปภาพไว้ทางด้านซ้ายของข้อความ เราสามารถทำได้โดยใช้รหัสนี้:

styles.css

img {
	float: left;
	margin-right: 20px;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราวางรูปภาพของเราไว้ทางด้านซ้ายของข้อความ นอกจากนี้เรายังระบุระยะขอบขวา:20px; คุณสมบัติ ซึ่งสร้างช่องว่างระหว่างด้านซ้ายของรูปภาพและข้อความของเรา

ตารางกล่องพร้อมลูกลอย

คุณสมบัติ float ให้คุณสร้างกล่องของเนื้อหาที่ปรากฏเคียงข้างกัน

สมมติว่าสังคมดูดาวต้องการให้ภาพสามภาพปรากฏเคียงข้างกัน ซึ่งแสดงให้ผู้คนเห็นดาวได้หากพวกเขาเข้าร่วม

เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

index.html

<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>

styles.css

* { box-sizing: border-box };

.image {
	float: left;
	width: 25%;
	padding: 25px;
}

รหัสของเราส่งคืน:

มาทำลายรหัสของเรากัน ในไฟล์ HTML เรามีแท็ก

ซึ่งมีภาพสามภาพ (แสดงโดยแท็ก ) ภาพแต่ละภาพมีขนาด 200×200 และเชื่อมโยงไปยังภาพที่เป็นเอกลักษณ์ของดวงดาว นอกจากนี้แต่ละภาพยังได้รับมอบหมายคลาส image .

ในไฟล์ styles.css เรา:

• ใช้ box-sizing:border-box; กำหนดสไตล์ให้กับทุกรายการในรายการของเรา ดังนั้นการเติมและเส้นขอบขององค์ประกอบจะรวมอยู่ในความกว้างและความสูงทั้งหมด ซึ่งช่วยให้เราสามารถจัดวางองค์ประกอบแบบเคียงข้างกันโดยไม่มีช่องว่างเริ่มต้น
• ใช้ float:left; เพื่อให้ภาพของเราปรากฏเคียงข้างกัน
• ใช้ความกว้าง:25% เพื่อทำให้แต่ละภาพใช้ความกว้าง 25% ของหน้าเว็บ
• ใช้ช่องว่างภายใน:25px; เพื่อสร้างช่องว่างระหว่างแต่ละภาพ 25px

บทสรุป

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

บทแนะนำนี้กล่าวถึงวิธีการใช้แอตทริบิวต์ CSS float เพื่อจัดตำแหน่งองค์ประกอบทางด้านซ้ายและด้านขวาของคอนเทนเนอร์ใน CSS โดยอ้างอิงจากตัวอย่าง ตอนนี้คุณพร้อมที่จะเริ่มใช้แอตทริบิวต์ float เหมือนผู้เชี่ยวชาญ CSS แล้ว!