float = “ลอย”
เป็น property หนึ่งของ css ซึ่งมีหน้าที่ทำให้ element นั้นมีลักษณะลอยออกมาในตำแหน่งที่เรากำหนด และอนุญาตให้ text หรือ element อื่นๆ ล้อมรอบ element ที่ float ได้ โดยจะมีอยู่ 4 ลักษณะ
left ให้ลอยและชิดไปทางด้านซ้าย
right ให้ลอยและชิดไปทางด้านขวา
inherit ให้ลอยตามค่าที่สืบทอดมาจาก parent
none ไม่ลอย (default)
กล่อง ชิดซ้าย เรียงแถวลงตามแนวตั้ง
<!DOCTYPE html>
<html>
<head>
<title>FLOAT AND CLEAR</title>
<link rel="stylesheet"type="text/css"href="main.css">
</head>
<body>
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
</body>
</html>
<style type="text/css">
.block-1 {
width: 120px;
height: 120px;
margin: 20px;
background: #0E9F98;
}
.block-2 {
width: 120px;
height: 120px;
margin: 20px;
background: #04BF9D;
}
.block-3 {
width: 120px;
height: 120px;
margin: 20px;
background: #F4E85C;
}
</style>กล่อง ต่อกัน เรียงแถวลงตามแนวนอน
.block-1 {
width: 120px;
height: 120px;
margin: 20px;
background: #0E9F98;
float: left;
}
.block-2 {
width: 120px;
height: 120px;
margin: 20px;
background: #04BF9D;
float: left;
}
.block-3 {
width: 120px;
height: 120px;
margin: 20px;
background: #F4E85C;
float: left;
}กล่อง ติดขอบซ้าย ขวาแยกกัน
(ลดให้เหลือ 2 เเล้ว)
.block-1 {
width: 120px;
height: 120px;
margin: 20px;
background: #0E9F98;
float: left;
}
.block-2 {
width: 120px;
height: 120px;
margin: 20px;
background: #04BF9D;
float: right;
}ต่อไปเราจะให้ block-1 มีขนาดใหญ่ขึ้น และให้ block-2 เป็น child ของ block-1 โดยจะกำหนดให้ block-1 เป็น float:left และ block-2 เป็น float:inherit
ผลลัพธ์ที่ออกมา คือ block-2 จะ float:left ตาม block-1
<!DOCTYPE html>
<html>
<head>
<title>FLOAT AND CLEAR</title>
<linkrel="stylesheet"type="text/css"href="main.css">
</head>
<body>
<divclass="block-1">
<divclass="block-2"></div>
</div>
</body>
</html>
<style type="text/css">
.block-1 {
width: 260px;
height: 260px;
margin: 20px;
background: #0E9F98;
float: left;
}
.block-2 {
width: 120px;
height: 120px;
margin: 20px;
background: #04BF9D;
float: inherit;
}
</style>
แล้วถ้าเราใส่ element ที่ไม่ float ต่อท้ายจากที่เรา float เรียบร้อย จะเกิดอะไรขึ้น?
ให้ block-1 และ block-2 กำหนดเป็น float:left ส่วน block-3 และ block-4 ไม่ต้องกำหนดอะไร
.block-1 {
width: 120px;
height: 120px;
margin: 20px;
background: #0E9F98;
float: left;
}
.block-2 {
width: 120px;
height: 120px;
margin: 20px;
background: #04BF9D;
float: left;
}
.block-3 {
width: 120px;
height: 120px;
margin: 20px;
background: #F4E85C;
}
.block-4 {
width: 120px;
height: 120px;
margin: 20px;
background: #404040;
}ผลลัพธ์ที่ออกมาก็คือ block-3 นั้นหายไป ดังภาพ จริงๆแล้ว block-3 นั้นไม่ได้หายไปไหน แต่อยู่ด้านล่าง block-1 ซึ่งลอยอยู่ ณ ตรงนั้นพอดี
เราจะแก้ปัญหาในลักษณะนี้โดยการใช้ clear
clear เป็น property หนึ่งของ css เช่นเดียวกับ float ซึ่งเมื่อคุณสมบัตินี้ถูกเรียกใช้กับ element ใดๆ หมายความว่า จะไม่มี element ใดๆ ต่อหรือลอยทางด้านขวา หรือทางซ้ายของ element นั้นๆ โดยจะมีอยู่ทั้งหมด 5 ลักษณะ
left ไม่อนุญาตให้มีอะไรลอยอยู่ทางด้านซ้าย
right ไม่อนุญาตให้มีอะไรลอยอยู่ทางด้านขวา
both ไม่นุญาตให้มีอะไรลอยอยู่ทั้งด้านซ้ายและด้านขวา
inherit ให้ clear ตามค่าที่สืบทอดมาจาก parent
none ไม่มี clear (default)
จากตัวอย่างก่อนหน้านี้ กำหนดให้ block-3 นั้น clear:both ซึ่งจะทำให้ไม่มีอะไรลอยอยู่ทั้งทางด้านซ้ายและขวา ผลลัพธ์จะได้ดังรูป
ในส่วนของ clear:left และ clear:right นั่นจะมีลักษณะคล้ายๆกัน แต่ต่างกันตรงที่จะยอมให้อีกฝั่งหนึ่งนั้นมี element ลอยอยู่ได้นั่นเอง
ตัวอย่างการจัด layout ด้วย float และ clear
https://smiletonz.wordpress.com/2013/04/13/css-float-clear/