ระบบกันสะเทือนซ้าย: float:left;
ระบบกันสะเทือนขวา: float:right;
การใช้การลอยตัวค่อนข้างกว้าง ที่นี่ฉันแนะนำการใช้งานทั่วไปในคอลเลกชันสั้น ๆ :
หากองค์ประกอบของเด็กถูกระงับมันจะทำให้องค์ประกอบของผู้ปกครองยุบที่ความสูง ส่วนนี้เกี่ยวข้องกับการล้างการระงับ บทต่อไปจะกล่าวถึงคำอธิบายของการล้างการระงับ
กลับไปที่จุด
ปรากฏการณ์แรก float = inline-blockระบบกันสะเทือนจะเป็นรูปแบบของ 4 บล็อกกลายเป็นโหมดบล็อกแบบอินไลน์: ดังที่แสดงในรูปด้านล่าง
<style> div {width: 200px; ความสูง: 200px; พื้นหลังสี: สีชมพู; ชายแดน: 1px Solid Black; ลอย: ซ้าย; } </style><body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>ปรากฏการณ์ที่สอง:
ดังที่แสดงในรูปด้านล่างเนื่องจากอันแรกถูกระงับองค์ประกอบบล็อกที่สองจะถูกนำเสนอด้านล่างของรายการแรก
อย่างไรก็ตามองค์ประกอบหลังจะไม่ข้ามไปยังองค์ประกอบก่อนหน้าเช่นองค์ประกอบบล็อกที่สี่ แต่ส่วนที่สามจะไม่ถูกระงับ องค์ประกอบบล็อกฤดูกาลที่สี่ยังคงอยู่ในตำแหน่งเดิม
<style>. first-one {float: ซ้าย; พื้นหลังสี: สีเขียว; } .Second-one {พื้นหลังสี: สีม่วง; }. Third-one {พื้นหลังสี: สีน้ำเงิน; } .Fourth-one {float: ซ้าย; พื้นหลังสี: สีเทา; } div {width: 200px; ความสูง: 200px; พื้นหลังสี: สีชมพู; ชายแดน: 1px Solid Black; ขนาดตัวอักษร: 30px; } </style><body> <div class = first-one> </div> <div class = second-one> </div> <div class = สาม-หนึ่ง> </div> <div class = fourth-one> </div> <div class = Fourth-one> </div> </body>ปรากฏการณ์ที่สาม:
หากองค์ประกอบทั้งหมดลอยและความกว้างที่เหลือขององค์ประกอบหลักไม่เพียงพอที่จะรองรับการจัดเรียงขององค์ประกอบเด็กในแถวนั้นมันจะเชื่อมต่อกับระดับบน
บทความนี้ทำซ้ำจาก: https://segmentfault.com/a/1190000022669455
สรุปนี่คือจุดสิ้นสุดของบทความนี้เกี่ยวกับการวิเคราะห์สั้น ๆ เกี่ยวกับการใช้งานของ HTML ลอยลอย สำหรับเนื้อหาลอยน้ำลอยน้ำ HTML ที่เกี่ยวข้องเพิ่มเติมโปรดค้นหาบทความก่อนหน้านี้จาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!