CSS clearfix不工作，爲什麼？

Question

我正在創建一個具有響應式導航的網頁。我覺得我幾乎在那裏，除了從一個非常混亂的clearfix問題。

我試圖在jsfiddle複製錯誤，但不幸無法。這就是我將整個網頁上傳到this的原因。

問題是，當頁面重新調整大小時，響應式導航切換位於標題下方，而不是標題頂部。這是由於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）重新調整大小時，nav-toggle放置在標題下方。

有人可以告訴我如何解決這個小的，但煩人的問題？

Answer 1

問題是divs一般會自動覆蓋整行，下一個元素會在它們的下面。要實現你想要的簡單添加

.logo-small{ 
    float:left; 
} 

並定位您的導航切換。

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