การใช้คุณสมบัติ Clearfix สามารถปรับองค์ประกอบพาเรนต์ตามองค์ประกอบย่อยโดยอัตโนมัติ และแก้ไขปัญหาในโค้ด HTML ผ่านแอตทริบิวต์บางอย่าง เช่น “ ล้น ” ที่ควบคุมขนาดขององค์ประกอบหลักและองค์ประกอบย่อยโดยไม่ต้องใช้มาร์กอัปเพิ่มเติม
การใช้คุณสมบัติ Clearfix
มาทำความเข้าใจการใช้คุณสมบัติ clearfix เพื่อทราบว่ามันทำอะไรกับเอาต์พุตโดยการเพิ่มคุณสมบัติ clearfix ของ CSS ในข้อมูลโค้ด HTML:
ไม่มีคุณสมบัติ Clearfix
มาเรียกใช้ข้อมูลโค้ดโดยไม่ต้องดำเนินการคุณสมบัติ clearfix เพื่อทำความเข้าใจประเภทของปัญหาที่ clearfix สามารถแก้ไขได้:
สร้างคลาสใน HTML ที่แทรกรูปภาพในคอนเทนเนอร์ div:
< แผนก ระดับ = 'เคลียร์ฟิกซ์' >
< br >< img ระดับ = 'ไอเอ็ม' src = 'image.png' ทุกอย่าง = 'ภาพ' ความกว้าง = '250' ความสูง = '180' >
ข้อความ...
< / แผนก >
ต่อไปนี้คือโค้ด CSS สำหรับ HTML ด้านบน:
<สไตล์ >
.clearfix {
ชายแดน : 3px แข็ง #2baa12 ;
การขยายความ : 5พิกเซล ;
}
.img {
ลอย : ซ้าย ;
}
>
สิ่งนี้จะสร้างเอาต์พุตในลักษณะที่คลาสย่อยที่มีอิมเมจล้นออกมานอกคอนเทนเนอร์ ในสถานการณ์เช่นนี้ สามารถใช้คุณสมบัติ clear fix เพื่อล้างข้อมูลหรือแก้ไขปัญหานี้ได้อย่างง่ายดาย:
ด้วยคุณสมบัติ Clearfix
เพื่อแก้ไขปัญหานี้ เราสามารถเพิ่ม ล้น แอตทริบิวต์ที่มีค่าเท่ากับ อัตโนมัติ ที่จะปรับคอนเทนเนอร์หลักตามขนาดขององค์ประกอบย่อย:
<สไตล์ >.clearfix {
ชายแดน : 3px แข็ง #2baa12 ;
การขยายความ : 5พิกเซล ;
}
.clearfix {
ล้น : อัตโนมัติ ;
}
.img {
ลอย : ซ้าย ;
}
>
ในข้อมูลโค้ดนี้ คลาสพาเรนต์คือคอนเทนเนอร์และรูปภาพถูกแทรกในคลาสย่อย:
< แผนก ระดับ = 'เคลียร์ฟิกซ์' >< br >< img ระดับ = 'ไอเอ็ม' src = 'image.png' ทุกอย่าง = 'ภาพ' ความกว้าง = '250' ความสูง = '180' >
ข้อความ...
< / แผนก >
การเพิ่มคุณสมบัติ clearfix จะขยายองค์ประกอบหลัก (คอนเทนเนอร์) โดยอัตโนมัติตามขนาดขององค์ประกอบย่อยที่แทรกรูปภาพ:
นี่เป็นวิธีที่คุณสมบัติ Clearfix ใน HTML ทำงาน
บทสรุป
คุณสมบัติ clearfix ใช้เพื่อปรับองค์ประกอบย่อยใน HTML ตามองค์ประกอบหลักด้วยคุณสมบัติ clearfix อย่างง่ายโดยไม่ต้องใช้มาร์กอัปเพิ่มเติม การใช้ CSS Clearfix จะเพิ่มหรือลดขนาดขององค์ประกอบหลักเพื่อปรับตามขนาดขององค์ประกอบย่อย