ตั้งค่าความสูงสำหรับองค์ประกอบหลักก่อนหน้า หมายเหตุ: ในการพัฒนาองค์กรอย่าเขียนความสูงหากคุณทำได้
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .Smallbox1 {Width: 100px; ความสูง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; มาร์จิ้น: 5px; ลอย: ขวา;} .SmallBox2 {WIDTH: 100PX; ความสูง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; มาร์จิ้น: 5px;} .SmallBox3 {ความกว้าง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; มาร์จิ้น: 5px;} .SmallBox3 {ความกว้าง: 100px; ความสูง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; มาร์จิ้น: 5px;} .SmallBox4 {ความกว้าง: 100px; ความสูง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; ระยะขอบ: 5px;} .SmallBox5 {WIDTH: 100PX; ความสูง: 100px; พื้นหลังสี: สีแดง; Boder: 3px Solid Black; มาร์จิ้น: 5px;} .SmallBox6 {ความกว้าง: 100px; ความสูง: 100px; พื้นหลังสี: สีแดง; ร่างกาย: 3px Solid Black; มาร์จิ้น: 5px;} .bigbox1, .bigbox2 { /*ความกว้าง: 400px;* / /*ความกว้าง: 400px;* / พื้นหลัง-สี: สีเขียว; ชายแดน: 3PX สีดำทึบ; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> <div class = smallbox3> </div> </div> <div class = bigbox2> <div class = smallbox4> </div> </div> </div> </div class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. วิธีที่สองในการล้างการลอยตัวเพิ่มแอตทริบิวต์ที่ชัดเจนในแอตทริบิวต์ต่อไปนี้
แอตทริบิวต์ที่ชัดเจนใช้ค่า:
ไม่มี: ค่าเริ่มต้นถูกนำไปเรียงตามกฎการเรียงลำดับขององค์ประกอบลอยตัว (ลอยซ้ายเพื่อค้นหาลอยซ้ายลอยไปทางขวาเพื่อค้นหาลอยขวา)
ซ้าย: อย่ามองหาองค์ประกอบลอยซ้ายด้านหน้า
ขวา: อย่ามองหาองค์ประกอบลอยที่ถูกต้องด้านหน้า
ทั้งสอง: อย่ามองหาองค์ประกอบที่ลอยอยู่ด้านซ้ายและลอยอยู่ด้านหน้า
ตัวอย่างเช่น: เราไม่ได้ตั้งค่าความกว้างและความสูงของกล่องขนาดใหญ่กล่องขนาดเล็กจะรองรับกล่องขนาดใหญ่ แต่กล่องใหญ่สองกล่องจะอยู่ในแถวเพราะสิ่งนี้
.SmallBox1 {ความกว้าง: 100px; ความสูง: 100px; ลอย: ซ้าย; พื้นหลังสี: สีแดง; ชายแดน: 2px Solid Black; } .SmallBox2 {WIDTH: 100PX; ความสูง: 100px; ลอย: ซ้าย; พื้นหลังสี: สีแดง; ชายแดน: 2px Solid Black; } .SmallBox3 {WIDTH: 100PX; ความสูง: 100px; ลอย: ซ้าย; พื้นหลังสี: สีน้ำเงิน; ชายแดน: 2px Solid Black; } .SmallBox4 {WIDTH: 100PX; ความสูง: 100px; ลอย: ซ้าย; พื้นหลังสี: สีน้ำเงิน; ชายแดน: 2px Solid Black; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div>เราใช้แอตทริบิวต์ที่ชัดเจนในกล่องเล็ก ๆ ที่สามเพื่อให้เราสามารถเริ่มต้นบรรทัดใหม่ (อันที่สี่ไม่จำเป็นต้องใช้เพราะเราต้องการให้กล่องที่สามอยู่ถัดจากกล่องที่สี่) และเราต้องการรหัสของกล่องเล็ก ๆ ที่สามเพื่อแก้ไขรหัส
.SmallBox3 {ล้าง: ซ้าย; ความกว้าง: 100px; ความสูง: 100px; ลอย: ซ้าย; พื้นหลังสี: สีน้ำเงิน; ชายแดน: 2px Solid Black; -หมายเหตุ: แอตทริบิวต์มาร์จิ้นหมดอายุแล้วและเราจะพูดถึงวิธีการที่ไม่หมดอายุในครั้งต่อไป
3. ซอร์สโค้ด:d131_clearfloat.html
d132_clearattribute.html
ที่อยู่:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
สรุปข้างต้นมีสองวิธีในการล้าง HTML ที่ลอยตัวซึ่งตัวแก้ไขแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณโปรดพิมพ์ซ้ำ โปรดระบุแหล่งที่มาขอบคุณ!