สลับตำแหน่ง Float ซ้าย-ขวา ตามขนาดหน้าจอ ด้วย Media Query
เทคนิคนี้ใช้ float: left/right ร่วมกับ @media query เพื่อให้กล่องลอยสลับตำแหน่งเมื่อหน้าจอเล็กลง (เช่น มือถือ) ช่วยให้เลย์เอาต์อ่านง่ายบนทุกขนาดจอ
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.floatRight, .floatLeft {
color: white;
font-size: 20px;
padding: 10px;
font-weight: 500;
}
.floatRight {
background-color: rgb(0, 2, 95);
float: right;
}
.floatLeft {
background-color: rgb(85, 0, 74);
float: left;
}
@media (max-width: 768px) {
.floatRight { float: left; }
.floatLeft { float: right; }
}
</style>
</head>
<body>
<h1>ตัวอย่าง Responsive Float</h1>
<h2>Float จะสลับตำแหน่งบนหน้าจอเล็ก</h2>
<div class="clearfix">
<div class="floatRight">Float Right ></div>
<div class="floatLeft">Float Left <</div>
<br />
</div>
</body>
</html>การทำงาน
- จอใหญ่ (>768px): สีเข้มอยู่ขวา, สีม่วงอยู่ซ้าย
- จอเล็ก (≤768px): สลับกัน สีเข้มกลายซ้าย, สีม่วงกลายขวา
.clearfix(แม้โค้ดจะขาด class นี้) ควรเพิ่มoverflow: autoหรือ::after {clear:both}เพื่อป้องกันการพังของเลย์เอาต์
แนวทางปัจจุบัน
แทน float แนะนำให้ใช้ Flexbox หรือ CSS Grid ซึ่งควบคุมลำดับได้ง่ายกว่าด้วย order หรือ grid-template-areas และไม่ต้องกังวล clearfix
