进阶：用Flex布局写更优雅的导航栏
一般来说，当你熟悉了float后，就可以自然过渡到现代更流行的Flex 布局，因为Flex 不仅写法简单，效果更好，而且响应式设计（适配手机端）也更方便！下面是示例代码（Flex 版）：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简单导航栏（flex版）</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .navbar { display: flex; justify-content: space-between; /* 左右两端对齐 */ align-items: center; /* 垂直居中 */ background-color: #333; padding: 0 30px; } .navbar .logo { color: #fff; font-size: 30px; text-decoration: none; } .navbar .nav-links a { color: #f2f2f2; text-decoration: none; margin-left: 30px; } .navbar .nav-links a:hover { color: #ff6600; /* 悬停变色 */ } </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>我们采用了 display: flex 属性，使子元素能够横向排列，从而优化了页面元素的分布。通过 justify-content: space-between 属性，实现了子元素在容器内左右顶开的效果，确保了页面元素的均衡布局，增强了视觉上的对称性。最后，align-items: center 的应用，使得 Logo 和链接在垂直方向上实现了居中对齐，进一步提升了页面的整体协调性和美观度。这些属性的结合使用，不仅提高了页面布局的灵活性和响应性，还为用户提供了更加舒适的视觉体验。
下面是在浏览器打开的样式：
你也可以看出：只是增加了几个新元素而已，并不需要死记硬背这些属性，当你想要用的时候再学完全来得及。同样我们也可以右键-->检查看看具体的布局同上面 float 的区别：
比起 float 版，代码更少、更直观！同时也证明了：CSS 并不是越复杂越好，灵活运用基础属性，效果更专业！