คุณสมบัติ CSS ที่ชัดเจนเป็นส่วนหนึ่งของ CSS ตั้งแต่ CSS1 ช่วยให้คุณสามารถระบุว่าองค์ประกอบใดสามารถลอยอยู่ข้างๆองค์ประกอบที่ถูกล้างและด้านใดด้านหนึ่ง ทรัพย์สินที่ชัดเจนมีค่าที่เป็นไปได้ห้าประการ:
- ไม่มี
- ซ้าย
- ขวา
- ทั้งสอง
- สืบทอด
วิธีใช้พร็อพเพอร์ตี้ CSS ที่ชัดเจน
วิธีที่ใช้บ่อยที่สุดในการใช้พร็อพเพอร์ตี้ที่ชัดเจนคือหลังจากที่คุณใช้พร็อพเพอร์ตี้ลอยบนองค์ประกอบแล้ว ตัวอย่างเช่น:
ข้อความถัดจากภาพของฉัน
ข้อความที่อยู่ด้านล่างภาพของฉัน
องค์ประกอบทั้งหมดเริ่มต้นให้ชัดเจน: ไม่มี; ดังนั้นหากคุณไม่ต้องการให้องค์ประกอบอื่น ๆ ลอยอยู่ข้างสิ่งใดคุณต้องเปลี่ยนสไตล์ที่ชัดเจน
เมื่อคุณกำลังล้างข้อมูลลอยตัวคุณจะจับคู่ข้อมูลของคุณกับลอยของคุณ ดังนั้นถ้าคุณลอยองค์ประกอบไปทางซ้ายแล้วคุณควรล้างไปทางซ้าย องค์ประกอบที่ลอยของคุณจะยังลอยอยู่ต่อไป แต่องค์ประกอบที่ได้รับการล้างข้อมูลและทุกอย่างจะปรากฏขึ้นด้านล่างบนหน้าเว็บ
หากคุณมีองค์ประกอบที่ลอยทั้งด้านขวาและด้านซ้ายคุณสามารถล้างด้านเดียวหรือคุณสามารถล้างทั้งสองอย่างได้
ใช้การล้างข้อมูลในเลย์เอาต์
วิธีที่นักออกแบบส่วนใหญ่ใช้มากที่สุดคือการออกแบบ องค์ประกอบของหน้า คุณอาจมี ภาพลอยอยู่ในกลุ่มของข้อความ และต้องการให้ย่อหน้าถัดไปเริ่มต้นด้านล่างภาพหรือคุณอาจมีทั้งคอลัมน์ของข้อความที่คุณต้องการจะลอยอยู่ข้างๆพวงของข้อความอื่นโดยมีข้อความปรากฏด้านล่าง
นี่คือ HTML สำหรับเค้าโครงในแบบฟอร์มนี้
มีคอนเทนเนอร์ div หนึ่งที่ถือครองอื่นซึ่งลอยอยู่ทางด้านซ้าย
div แบบลอยสั้น
เนื้อหาภายในคอนเทนเนอร์ div ซึ่งจะอยู่ทางด้านขวาของ div แบบลอย
การดำเนินการนี้จะทำงานได้ดีโดย div ที่สั้นกว่าจะลอยอยู่ทางด้านซ้ายของส่วนที่เหลือของ div หลัก
คุณสามารถล้างข้อความข้างช่องลอยโดยการเพิ่มแท็กที่คุณต้องการให้เริ่มเขียนภายใต้ช่องแบบลอย
ปัญหาเกิดขึ้นเมื่อกล่องลอยยาวกว่าเนื้อหาถัดไป จากนั้นตามที่คุณเห็นสีพื้นหลังของกล่องหลักจะไม่ถูกดำเนินการไปที่ด้านล่างของกล่องแบบลอย
โชคดีที่มีวิธีง่ายๆในการแก้ไขปัญหานี้: คุณสมบัติ โดยการตั้งค่ากล่องหลักเพื่อให้มีส่วนเกิน: อัตโนมัติ; สีพื้นหลัง จะยังคงอยู่ข้างช่องลอยอีกต่อไปที่ด้านล่างสุดดังแสดงใน ตัวอย่าง นี้