Floating List Items ใน CSS คืออะไร?

ใช้ float: left กับ <li> เพื่อสร้าง Navigation Bar แนวนอน (Horizontal Navigation Bar)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            padding: 8px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

หมายเหตุ: ใช้ float ต้อง Clearfix Parent เพื่อป้องกัน Layout Collapse ในปัจจุบันแนะนำให้ใช้ Flexbox หรือ Grid แทน