Float：块格式化上下文

Question

    <nav>
       <ul>
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Facility</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Hours</a></li>
          <li><a href="#">Contacts</a></li>
      </ul>
   </nav>

    nav ul{
       margin: 0;
       padding-left: 50px;
       list-style: none;
    }

    nav ul li {
       float:left;
       border:1px solid #878E63;
       width: 15%;
    }

在nav ul li { ...}的上面代码中，我将float属性设置为left。关于bfc在这种情况下是如何工作的我有点困惑。我知道＆＃34;在块格式化上下文中，框是一个接一个地垂直排列，从包含块的顶部开始（在这种情况下包含块是ul，正确吗？）。每个盒子的左外边缘接触包含块的左边缘（用于从右到左格式化，右边缘触摸）＆＃34;。但是当我运行代码时，它给了我这个输出：

列表元素在浮动属性创建的块格式化上下文中水平对齐，而不是按原样垂直对齐？谁可以给我解释一下这个？

Answer 1

当您将floadt:left放在li元素上时，预期会出现此行为，在这种情况下，所有li元素都会向左移动并拥有您提到的width:15%; 。

Answer 2

您的引用摘自9.4 Normal flow部分。但是花车被从流程中取出并按照不同的规则进行布局。仍然在流程中的块框继续以所描述的垂直方式布局（并且浮动元素对它们是不可见的）

Answer 3

我担心你弄错了你正在阅读的文件部分。如果你想使用花车，你必须阅读：https://drafts.csswg.org/css2/visuren.html#floats

您获得的是预期的行为。如果要垂直堆叠项目，请不要使用浮动。