การใช้ style =“ clear: both” คืออะไร?

ฉันบังเอิญเห็นdivว่ามีสไตล์clear:both! ใช้clearในstyleอะไร?

<div style="clear:both">

clear:both ทำให้องค์ประกอบลดลงด้านล่างองค์ประกอบลอยใด ๆ ที่อยู่ข้างหน้าในเอกสาร

คุณยังสามารถใช้clear:leftหรือclear:rightทำให้มันหล่นลงด้านล่างเฉพาะองค์ประกอบที่ลอยไปทางซ้ายหรือขวา

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

เพียงเพื่อเพิ่มคำตอบของ RichieHindle ให้ดูที่Floatutorialซึ่งจะแนะนำวิธีการทำงานของ CSS แบบลอยและการล้างข้อมูล

เมื่อคุณใช้ลูกลอยที่ไม่มีความกว้างจะมีช่องว่างในแถวนั้นเหลืออยู่ ในการปิดกั้นพื้นที่นี้คุณสามารถใช้clear:both;ในองค์ประกอบถัดไป