Question

我正在文档中创建一个水平条。它由父div内的三个锚点组成。 div是一个块元素，因此使用background-color:#333;我希望使用100％宽的灰色背景，但是除非添加overflow:hidden;，否则不会产生它。这是 MWE

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .topbar{
        background-color:#333;
        /*overflow:hidden;*/
      }
      
      .topbar a {
        float:left;
        color:white;
        padding:16px 12px;
      }
    </style>
  </head>
  <body>

    <h1>top navigation bar</h1>

    <div class="topbar">
      <a href="#">hello</a>
      <a href="#">hello</a>
      <a href="#">hello</a>
    </div>

  </body>
</html>

问题：

为什么除非添加了溢出功能，否则灰色条不会出现？

（不一定要全部回答，但至少需要一些有用的链接）

Answer 1

删除浮动元素，因为您使用的是浮动元素，但元素仍然从页面的正常流程中删除，尽管仍然保留了一部分流程（与绝对定位相反）。

如果您仍然想使用浮点数（在您的情况下这不是必需的），请使用height: 60px或使用clear-fix解决方案，您可以在此处了解更多信息：https://css-tricks.com/snippets/css/clear-fix/

P.S。您的html无效，因为您两次打开<html>且从不打开<body>，但这不会影响栏或您要在其中编写的任何其他代码，只是无效的HTML文献。

以下是clear-fix

的有效解决方案

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .topbar {
      background-color: #333;
      /*overflow:hidden;*/
    }
    
    .topbar:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .topbar a {
      float: left;
      color: white;
      padding: 16px 12px;
    }
  </style>
</head>

<body>

  <h1>top navigation bar</h1>

  <div class="topbar">
    <a href="#">hello</a>
    <a href="#">hello</a>
    <a href="#">hello</a>
  </div>

</body>

</html>

为什么没有宽度为100％的单杠？

1 个答案: