CSS clearfix 不工作，为什么？

Question

我正在创建一个具有响应式导航的网页。我想我快到了，除了一个非常令人困惑的 clearfix 问题..

我试图在 jsfiddle 中复制错误，但不幸的是没能成功。这就是为什么我将整个网页上传到 this link。

问题是，当页面为 re-sized 时，响应式 nav-toggle 位于 header 下方，而不是 header 上方。这是由于浮动属性 = 在 nav-toggle class 中。

我一直在尝试添加一个 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;  
}

到 parent div 像这样：

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

还有这样的：

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

当屏幕 (<768px) 为 re-sized 时，响应式 nav-toggle 仍位于 header 下方。

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

Answer 1

问题是 div 通常会覆盖整行，因此下一个元素会自动出现在它们下面。要实现你想要的，只需添加

.logo-small{
   float:left;
}

并定位您的导航开关。

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

CSS clearfix 不工作，为什么？

CSS clearfix not working, why?

html

css

css-float

clearfix