ในอดีตเว็บไซต์จำนวนมากใช้ตาราง HTML เพื่อจัดวางหน้าเว็บเพราะวิธีนี้ให้ผลลัพธ์ที่เชื่อถือได้อย่างสม่ำเสมอในเว็บเบราว์เซอร์รุ่นเก่า นี่ไม่ใช่วิธีแก้ปัญหาในอุดมคติเนื่องจากตารางมีความตั้งใจจริง ๆ ในการแสดงข้อมูลแบบตารางแทนที่จะจัดวางหน้าเว็บ การใช้ตารางยังหมายความว่าโครงร่างนั้นถูกเขียนโค้ดลงในหน้าทำให้งานของการอัปเดตไซต์ใช้เวลานานขึ้น Cascading Style Sheets เปิดตัวคุณสมบัติ "ลอย" ช่วยให้นักออกแบบสามารถลอยองค์ประกอบไปทางซ้ายหรือขวา สิ่งนี้ช่วยให้สามารถควบคุมหน้าได้มากขึ้นและมีข้อได้เปรียบเพิ่มเติมในการแยกเค้าโครงไซต์ออกจากเนื้อหา

1

เปิดตัวแก้ไขข้อความหรือตัวแก้ไข HTML และสร้างเอกสาร HTML ใหม่

2

เพิ่มรหัสต่อไปนี้ในส่วนของหน้า:

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

3

แทรกรหัส CSS ต่อไปนี้ในส่วนของเอกสาร HTML ของคุณ:

บันทึกหน้าและรีเฟรชในเบราว์เซอร์ของคุณเพื่อแสดงการเปลี่ยนแปลง กฎ CSS กำหนดเป้าหมาย divs ทั้งสองซ้อนกันภายใน div“ myContainer” คุณสมบัติ“ float” บอกให้เบราว์เซอร์ลอย divs ไปทางซ้าย - คุณสามารถเปลี่ยนค่า float เป็น“ right” เพื่อลอย divs ไปที่ขอบด้านขวาของ div ที่มี div ถูกตั้งค่าเป็นความกว้างคงที่ 300 พิกเซลและมีเส้นขอบสีดำ 1 พิกเซลเพื่อให้เค้าโครงมองเห็นได้ง่ายขึ้น ในเบราว์เซอร์ของคุณคุณจะเห็นว่ากล่องมีการแสดงแบบเคียงข้างกัน

4

เพิ่ม div ตัวที่สามให้กับส่วนของหน้านอก div "myContainer" ดังที่แสดงด้านล่าง:

บันทึกหน้านั้นและโหลดซ้ำในเบราว์เซอร์ของคุณ คุณจะเห็นว่า div ที่สามแสดงถัดจาก div ที่หนึ่งและที่สองแม้ว่ามันจะไม่ได้ลอย สิ่งนี้เกิดขึ้นเนื่องจากองค์ประกอบ HTML ที่เหลือจะไหลไปมารอบ ๆ องค์ประกอบที่ลอยอยู่ นี่อาจเป็นพฤติกรรมที่พึงประสงค์ในบางกรณี แต่ในตัวอย่างนี้เราต้องการให้ div ที่สามแสดงภายใต้ divs ที่ลอยเพื่อสร้างส่วนท้าย

5

แทรกกฎต่อไปนี้ลงในส่วนสไตล์ในส่วนหัวของหน้า:

myFooter {

clear: both; 

}

นี่เป็นการกำหนดเป้าหมาย div“ myFooter” ตัวที่สามและบอกให้เบราว์เซอร์หยุดการลอยและแสดงองค์ประกอบ HTML ที่ตามมาใต้ div "myContainer" บันทึกและรีเฟรชหน้า คุณจะเห็นว่าส่วนท้ายที่เกิดขึ้นโดยฝ่ายที่สามนั้นแสดงอยู่ด้านล่างกอง div

ปลาย

• คุณสามารถใช้คุณสมบัติ CSS "margin" เพื่อสร้างช่องว่างระหว่าง divs ที่ลอยอยู่