clear：divをfloat divの下に配置しようとしたときに両方とも機能しない

Question

私は.left divが浮動小数点になり、.right divが浮動小数点であり、それらはw/nの.navBarWrapper divです。私はclear:bothを.searchBarに適用しましたが、下の青色の長方形で示されるように、searchBarはまだページの左上隅に表示されています。これを修正するには？

.navBarWrapper { 
 
    position: fixed; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.float_left { 
 
    float: left; 
 
} 
 

 
.float_right { 
 
    float: right; 
 
} 
 

 
.bar { 
 
    height: 8.02%; 
 
    overflow: auto; 
 
} 
 

 
.searchBar { 
 
    clear: both; 
 
}

<div class="navBarWrapper"> 
 
    <div class="top bar"> 
 
    <ul class="left float_left"> 
 
     <li class="title">Photo Albums</li> 
 
    </ul> 
 
    <ul class="right float_right"> 
 
     <li class="buttons"> 
 
     <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="bottom bar"> 
 
    <ul> 
 
     <li><a href="">Select</a></li> 
 
     <li><a href=""><span class = "iconTitle">New Album </span><img class = "icons" src = "images/addAlbum.png" alt = "addAlbum" width="30" align = "right"/></a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="searchBar"> 
 
    <img src="images/search.png" alt="search" width="40"> 
 
</div>

Answer 1

だけ.navBarWrapperはそれが固定位置のしているように、本体に相対的である.navBarWrapper

.searchBarからposition: fixed;を削除してみてください。両方のクラスを相対的な位置として配置すれば、これはうまくいくはずです。.navBarWrapperに位置があります。 .searchBarにclear: bothを入れる必要もありません。 .searchBar divがnavBarWrapper div内にある場合にのみ両方をクリアすることは意味があります。

あなたの最終的なコードは、ナビゲーションバーを使用すると、スクロールするとページの上に滞在すると仮定されているので、私は `fixed`するnavBarWrapperにしたい

.navBarWrapper { 
    z-index: 1; 
    width: 100%; 
} 

.float_left { 
    float: left; 
} 

.float_right { 
    float: right; 

} 

.bar { 
    height: 8.02%; 
    overflow: auto; 
} 

.searchBar { 

}