HTML Float属性

Question

<nav>
    <div class="row">
       <img src="resources/img/logo-white.png" alt="logo" class="logo">
           <ul class="main-nav">
               <li><a href="#">Food delivery</a></li>
               <li><a href="#">How it works</a></li>
               <li><a href="#">Our cities</a></li>
               <li><a href="#">Sign up</a></li>
           </ul>
   </div>
</nav>

我在上面的Udemy教程中有导航栏的代码。 navbar的CSS源代码如下：

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.logo {
    height: 100px;
    width: auto;
    margin-top: 20px;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 60px;
}

我感到困惑的部分是对于class="row"中div的img，为什么图像被放到左上方，即使我没有设置浮动属性img到float: left;。 正如您在下面的image中看到的那样，white徽标位于top left，即使我从未将float属性设置为{{1 }}。但对于left的{​​{1}}，我必须将ul属性设置为class="main-nav"。

Answer 1

img是一个内联元素＆amp; ul是块级元素。这意味着ul将采用100％宽度并且在新行上，而img将采用其特定宽度。默认情况下，方向是ltr，所以我们将所有内联元素浮动到左侧。

Answer 2

displays一侧的徽标left作为每个HTML元素的默认方向，具有＆＃34;规则＆＃34; LTR，这意味着即使您没有float: left行，display也是left。

看看this，它可以帮助你做一些快乐的编程！