CSS - float และ clear

float
          float แปลว่า ลอย มีคุณสมบัติทำให้ element กลายสภาพจากสถานะปกติให้สามารถลอยไป ณ ตำแหน่งที่เรากำหนด และอนุญาติให้ text หรือ element อื่น ๆ ล้อมรอบมันได้ แต่ส่วนมากแล้วมักถูกใช้กำหนดกับรูปภาพ มันก็คือคำสั่ง css ที่สร้างมาเพื่อแทน align="left" กับ align="right"

          เมื่อใช้คุณสมบัติ float จะทำให้ element ที่รับคุณสมบัตินี้ไป สามารถ float ไปทางซ้ายและทางขวาของ element ที่เป็น container ของมันเอง แต่ไม่สามารถ float ไปอยู่บนสุดและล่างสุดได้ และทุก ๆ element นั้นสามารถดึงเอาคุณสมบัติ float ไปใช้ได้

          ตัวอย่างการนำไปใช้

                 body { font-family: Arial, Helvetica, sans-serif;  font-size: 100%; }
                 .contentStyle01 { width: 550px;  font-size: 0.75em; }
                 .contentStyle01 img {float: left; margin: 0.625em; border: 1px solid #666;}


จัดตำแหน่งด้วย float และ clear

          การวางตำแหน่ง layout ของ div แต่ละอัน จะใช้ float และ clear เป็นประจำ ทำให้วางตำแหน่งได้อิสระมากขึ้น ในกรณีที่ต้องการมีหลายคอลัมน์ ใน 1 หน้า

          float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้อยู่ชิดซ้ายก็ใส่ float: left ถ้าชิดขวาใส่ float: right

          clear นั้น clear: left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย clear: right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา ที่มักใช้เป็นประจำคือ clear: both คือไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักใช้กับส่วน footer