คุณสมบัติ CSS float ใช้สำหรับวางตำแหน่งหรือจัดรูปแบบกล่องหรือเนื้อหา นักพัฒนาสามารถวางตำแหน่งองค์ประกอบไปทางซ้ายหรือขวาด้วย CSS float
คุณสมบัติ float สามารถมีค่าใดค่าหนึ่งดังต่อไปนี้ -
- ซ้าย − องค์ประกอบลอยอยู่ทางด้านซ้ายของภาชนะ
- ถูกต้อง − องค์ประกอบลอยอยู่ทางด้านขวาของภาชนะ
- ไม่มี − องค์ประกอบไม่ลอย เป็นค่าเริ่มต้น
- สืบทอด − องค์ประกอบสืบทอดค่าทศนิยมของพาเรนต์
ตัวอย่าง
มาดูตัวอย่างคุณสมบัติ CSS Float กัน −
<!DOCTYPE html> <html> <head> <title>CSS Float</title> <style> form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } #container { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } .child{ height: 40px; width: 40px; color: white; border: 4px solid black; } .orange{ background-color: #FF8A00; } .red{ background-color: #F44336; } .violet{ background-color: #C303C3; } .green{ background-color: #4CAF50; } .blue{ background-color: #03A9F4; } .yellow{ background-color: #FEDC11; } #left{ display: flex; float: left; } #right{ display: flex; float: right; } </style> </head> <body> <form> <fieldset> <legend>CSS-Float</legend> <div id="container"> <div class="child orange"></div><div class="child red"></div><div class="child violet"></div><div class="child green"></div><div class="child blue"></div><div class="child yellow"></div> </div><br> <input type="button" value="float-->left" onclick="floatDecider('left')"> <input type="button" value="float-->right" onclick="floatDecider('right')"> <div><div id="left"></div><div id="right"></div></div> </fieldset> </form> <script> var left = document.getElementById('left'); var right = document.getElementById('right'); function floatDecider(direction){ var allChildren = document.getElementsByClassName('child'); if(direction === 'left') left.insertAdjacentElement('beforeend',allChildren[0]); else right.insertAdjacentElement('afterbegin',allChildren[0]); } </script> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ก่อนคลิกปุ่มใด ๆ −
คลิก 'ลอย-->ซ้าย ’ ปุ่ม 4 ครั้ง −
คลิก 'ลอย-->ขวา ปุ่ม t −