เราสามารถทำให้องค์ประกอบลอยได้ด้วยคุณสมบัติ float ใน CSS ไปทางซ้ายหรือขวาขององค์ประกอบพาเรนต์ที่ครอบไว้ องค์ประกอบอื่นๆ จะถูกวางรอบเนื้อหาที่ลอย
องค์ประกอบหลายรายการที่มีค่า float property เหมือนกันจะถูกวางติดกันทั้งหมด
ตัวอย่าง
ลองดูตัวอย่างสำหรับคุณสมบัติ 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>
ผลลัพธ์
ก่อนคลิกปุ่มใดๆ:
คลิกปุ่ม 'float-->left' 4 ครั้ง:
คลิกปุ่ม 'float-->right':
