html - float : Block Formatting Context

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 在这种情况下的工作方式有点困惑。我知道“在 block 格式上下文中，框一个接一个地垂直放置，从包含 block 的顶部开始(在这种情况下，包含 block 是 ul，对吗？)。每个框的左外边缘接触包含 block 的左边缘(对于从右到左的格式，右边缘接触)”。但是当我运行代码时，它给了我这个输出:

列表元素在由 float 属性创建的 block 格式化上下文中水平对齐，而不是像预期的那样垂直对齐？谁可以给我解释一下这个？

Answer 1

您的引述来自标题为 9.4 Normal flow 的部分.但是 float 从流中取出并按照不同的规则进行布局。仍在流中的 block 盒继续按照描述的垂直方式进行布局，( float 元素对它们是不可见的)