我们先从 float 布局讲起，写一个最简单的导航栏：Logo 在左，导航链接在右。下面是示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简单导航栏（float版）</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .navbar { background-color: #333; overflow: hidden; } .navbar .logo { float: left; color: #fff; font-size: 20px; padding: 14px 20px; text-decoration: none; } .navbar .nav-links { float: right; } .navbar .nav-links a { display: block; color: #f2f2f2; text-align: center; padding: 14px 20px; text-decoration: none; float: left; } .navbar .nav-links a:hover { background-color: #ddd; color: black; } </style> </head> <body> <div class="navbar"> <div class="logo">MyLogo</div> <div class="nav-links"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#services">服务</a> <a href="#contact">联系</a> </div> </div> <h1>欢迎来到我的网站！</h1> <p>这是正文内容区域。</p> </body> </html>我们采用了 float: left 属性，使 Logo 能够紧贴页面的最左侧，确保其在视觉上处于显著位置。同时，利用 float: right 属性将导航链接推至页面的最右侧，实现页面元素的左右对称分布，增强了页面的平衡感。对于导航链接之间的排列，我们继续使用 float: left，使各个链接能够横向排列，提高页面的紧凑性和可读性。最后，为了消除浮动布局带来的父元素塌陷问题，我们应用了 overflow: hidden 属性进行清除，确保了页面布局的稳定性。这种布局方式在保证页面美观的同时，也提供了良好的用户体验。
下面我们看看浏览器打开效果：
左边 Logo，右边菜单，整体横向分布。你看，只用到这些基础属性：
● float
● overflow
● padding
● background-color
● color
● text-decoration
● hover 伪类
是不是发现根本没什么需要背的？只要理解了核心逻辑，直接能用！如果你不是很理解，可以右键-->检查。看看具体的布局来加深理解：
左边 Logo，右边菜单，整体横向分布。你看，只用到这些基础属性：
● float
● overflow
● padding
● background-color
● color
● text-decoration
● hover 伪类
是不是发现根本没什么需要背的？只要理解了核心逻辑，直接能用！如果你不是很理解，可以右键-->检查。看看具体的布局来加深理解：
