CSS clearfix不工作，为什么?

Question

我正在创建一个响应式导航的网页。我想我差不多到了，除了一个非常令人困惑的明确修复问题。

我试图在jsfiddle中复制错误，但不幸的是不能。这就是为什么我把整个网页上传到这个链接。

问题是，当页面重新调整大小时，响应式导航开关被放置在标题下方，而不是标题上方。这是由于nav-toggle类中的浮动属性= right。

我一直在尝试添加一个clearfix:

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac */
.clearfix {  
  display: block;  
}

添加到父div中，像这样:

<div class="row head clearfix"> <!-- Start Row -->

，也像这样:

<nav class="nav-collapse clearfix"> 
  <ul class="clearfix">

尽管如此，当屏幕(<768px)被重新调整大小时，响应式导航开关被放置在标题的下方。

谁能告诉我如何解决这个小而恼人的问题?

Answer 1

问题是div通常覆盖整行，所以下一个元素会自动跟随在它们下面。要实现您想要的，只需添加

.logo-small{
   float:left;
}

和定位你的导航开关。

.nav-toggle {
  float: right;
  margin-top: 50px;
}