为什么即使在指定宽度后内容也会在 div 中溢出

Question

我想在 div 中显示两个 div（header-logo 和 nav-menu）。一个向右漂浮，另一个向左漂浮。

每个div都是固定宽度(100px)。第二个 div 移到 head-banner 之外。我无法弄清楚为什么内容会溢出head-banner。

     <!DOCTYPE html>
        <html>
         <head>
          <meta charset="UTF-8">
          <style>
        
      .head-banner{
       background: cyan;
       //overflow:hidden;
      }
      .header-logo{
       width: 100px;
           background:yellow;
float:left;
      }
      .nav-menu{
        background:green;
       width:100px;
       float:right;
      }
      </style>
     </head>
     <body>
     <div class='head-banner'>
       <div class='header-logo'>
        div1
       </div>
       <div class='nav-menu'> 
        div2
       </div>
      </div>
     </body>
    </html>

编辑

我看不到.head-banner 的颜色。我认为 header-logo 和 nav-menu 都被推出了。

如果我将 head-banner 中的 overflow 设为隐藏，它会按预期工作。

我想知道为什么会这样。

Answer 1

您错过了 float:left 徽标。

     <!DOCTYPE html>
        <html>
         <head>
          <meta charset="UTF-8">
          <style>
        
      .head-banner{
       background: cyan;
       overflow:hidden;
      }
      .header-logo{
       width: 100px;
       background:yellow;
float:left;
      }
      .nav-menu{
        background:green;
       width:100px;
       float:right;
      }
      </style>
     </head>
     <body>
     <div class='head-banner'>
       <div class='header-logo'>
        div1
       </div>
       <div class='nav-menu'> 
        div2
       </div>
      </div>
     </body>
    </html>

Answer 2

保留一个 div float:left 和另一个 float:right

     <!DOCTYPE html>
        <html>
         <head>
          <meta charset="UTF-8">
          <style>
        
      .head-banner{
       background: cyan;
       overflow:hidden;
      }
      .header-logo{
       width: 100px;
       background:yellow;
                float:left; 
      }
      .nav-menu{
        background:green;
       float:right;
      }
      </style>
     </head>
     <body>
     <div class='head-banner'>
       <div class='header-logo'>
        div1
       </div>
       <div class='nav-menu'> 
        div2
       </div>
      </div>
     </body>
    </html>

Answer 3

改成这样：

.head-banner{
    background: cyan;
    overflow: hidden;<-------Added
}

.header-logo{
    width: 100px;
    background:yellow;
    float: left;<---------Added
}

.nav-menu{
    background:green;
    width:100px;
    float:right;
}

.head-banner{
    background: cyan;
    overflow: hidden;<-------Added
}

.header-logo{
    width: 100px;
    background:yellow;
    float: left;<---------Added
}

.nav-menu{
    background:green;
    width:100px;
    float:right;
}

<div class='head-banner'>
    <div class='header-logo'>
       div1
    </div>
    <div class='nav-menu'> 
       div2
    </div>
</div>

Answer 4

问题是第一个 div 仍然是 display: block，这导致第二个 div 显示在下一行。您可以通过几种方式解决此问题：

将第一个div设为float: left
将第一个div设为display: inline-block

我个人的偏好是#2，所以这就是我在下面的代码片段中所做的。

.head-banner{
  background: cyan;
}
.head-banner div {
  display: inline-block;
}
.header-logo{
  width: 100px;
  background:yellow;
}
.nav-menu{
  background:green;
  width:100px;
  float: right;
}

<div class='head-banner'>
  <div class='header-logo'>
    div1
  </div>
  <div class='nav-menu'> 
    div2
  </div>
</div>

Answer 5

我在 google 上找到了答案。

If a div has all the elements floating then the div will collapse itself

为什么即使在指定宽度后内容也会在 div 中溢出

Why content overflows in a div even after specifying widths

html

css

overflow