Я не могу понять, почему мой clearfix не работает

Я не могу понять, почему мое ясное исправление не работает. Я поплыл nav nav с классом main-nav вправо, а заголовок немного свалился.Я не могу понять, почему мой clearfix не работает

Мое clearfix находится прямо над стилем нижнего колонтитула в CSS.

jsFiddle

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

источник

2016-04-30 Brandon

Ваш код работает просто изменить content="" на content:""

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

Snippet:

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>

источник

2016-04-30 06:54:09

Я не могу понять, почему мой clearfix не работает

ответ

Смежные вопросы