导航栏float属性正确使用及a标签垂直排列问题排查

先明确两个核心CSS布局规则，就能完全理清这个现象的逻辑：

• 未设置浮动、flex、grid布局的块级元素，默认处于常规文档流中，会独占父容器的整行可用宽度，多个同级块级元素默认从上到下垂直堆叠排列。
• display: block属性仅作用于当前元素，让当前元素获得块级元素特性，不会改变父元素的排列规则。

a标签垂直排列的原因非常直接：
<li>本身是原生块级元素，未设置浮动时，每个li都会独占父元素ul的整行宽度，自然从上到下垂直排成一列。给li内部的a标签设置display: block，只是让a从默认行内元素变为块级，撑满自身父元素li的宽度，完全无法改变li本身垂直堆叠的行为，最终就会看到所有导航链接垂直排列。

给nav ul li设置float: left后实现横排的原理：
设置左浮动的元素会脱离常规文档流，不再遵循块级元素独占一行的规则，会依次紧贴父容器左边缘排列，一行排满后才会折行。示例中每个li设置了25%宽度，4个li加起来刚好占满ul的100%宽度，自然就实现了横向排列效果。

代码优化提示 #

当前代码仅给.logo设置了左浮动，同级ul没有做浮动隔离，目前因为logo宽度30%+10%右内边距、ul宽度60%，两者加起来刚好占满整行宽度，视觉上没有错乱；一旦后续调整宽度比例，ul内容很容易钻入浮动logo下方引发布局错位。更稳妥的写法是给nav ul也加上float: left，或者给ul设置overflow: hidden触发BFC，实现和浮动元素的布局隔离。

复现代码 #

CSS 样式

* {
  margin: 0;
  padding: 0;
}
div.logo {
  float: left;
  height: 40px;
  background-color: #d41212;
  width: 30%;
  padding-right: 10%;
}

nav ul {
  height: 40px;
  width: 60%;
  background-color: #03912d;
  /* 建议补充 float: left; 避免宽度调整后出现布局错位 */
}
nav ul li {
  list-style-type: none;
  float: left;
  width: 25%;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding-right: 10px;
  text-align: center;
}

HTML 结构

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <div class="logo"></div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </nav>
  </body>
</html>

内容的提问来源于stack exchange，提问作者jasper93