Question

我无法弄清楚为什么我的明确解决方案无效。我已经使用一类主导航向右浮动导航ul并且标题有点崩溃。

我的clearfix正好位于CSS中的页脚样式之上。

.clearfix::after {
    content="";
    display: table;
    clear: both;
    }

Answer 1

您的代码只是将content=""更改为content:""

.clearfix::after {
    content:"";
    display: table;
    clear: both;
    }

摘录：

body {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-layout {
  min-height: calc(100vh - 20px);
}
header {
  background-color: orange;
  max-width: 100%;
  padding: 1px;
  margin: auto;
}
.main-title {
  padding: 3% 5% 0;
  margin: 0;
}
.main-nav {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-nav li {
  font-size: 1.5rem;
  list-style: none;
  position: relative;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.sub-nav {
  width: 100%;
  background-color: white;
  position: absolute;
  z-index: 1;
  display: none;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.sub-nav li {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-nav li:hover .sub-nav {
  display: block;
}
section {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
footer {
  height: 20px;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
@media screen and (min-width: 450px) {
  .main-nav {
    margin: 0 5%;
    float: right;
  }
  .main-nav li {
    padding: 5px;
    float: left;
  }
}

<body>
  <div class="main-layout">
    <header class="clearfix">
      <h1 class="main-title">This Is a Test</h1> 
      <nav class="clearfix">
        <ul class="main-nav">
          <li><a href="index.html">Home</a>
          </li>
          <li>
            <span>Content1</span>
            <ul class="sub-nav">
              <li><a href="page1.html">Page 1</a>
              </li>
              <li><a href="page2.html">Page 2</a>
              </li>
              <li><a href="page3.html">Page 3</a>
              </li>
            </ul>
          </li>
          <li>
            <span>Content2</span>
            <ul class="sub-nav">
              <li><a href="page4.html">Page 4</a>
              </li>
              <li><a href="page5.html">Page 5</a>
              </li>
              <li><a href="page6.html">Page 6</a>
              </li>
            </ul>
          </li>
          <li>
            <span>Content3</span>
            <ul class="sub-nav">
              <li><a href="page7.html">Page 7</a>
              </li>
              <li><a href="page8.html">Page 8</a>
              </li>
              <li><a href="page9.html">Page 9</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <section>
    </section>
  </div>
  <footer>
    <span>Footer Content</span>
  </footer>
</body>

我无法弄清楚为什么我的clearfix不起作用

1 个答案: