Divをdiv内に追加するにはどうすればよいのですか？

Question

私はこのHTMLコード

<div id="b_container"> 
    <div id="b_header"> 
     <div class="header_left"><a href="#">link 1 </a></div> 
     <div class="header_left"><a href="#">link 2 </a></div> 
     <div class="header_left"><a href="#">link 3 </a></div> 
    </div> 
    <div id="b_content">content goes here</div> 
    <div id="b_footer">footer goes here</div> 
</div> 

を持って私は、このCSSコード

#b_container 
{ 
    margin-right: auto; 
    margin-left: auto; 
    background: red; 
    width:900px; 
    padding: 10px; 
} 

#b_header{ 
    background: #FFF; 
    padding: 5px; 

} 
.header_left{ 
    float: left; 
    width:100px; 
    background: #CCCC00; 

} 
#b_footer{ 
    background: #FFF; 
    padding: 5px; 
} 
#b_content{ 
    background: #00FFFF; 
    padding: 5px; 
    height: 100px; 
} 

を使用するが、結果はb_content上方（クラスheader_left有する）は、3つのdivを示しています。どうして ？

Answer 1

div（クラスheader_left）からフローティングを停止する必要があります。あなたは#b_headerに次の行を追加することでそれを行うことができます。

overflow: hidden; 

また、このexampleを参照してください。

別の方法として、clear: both;という空のdivを最後の1つとして、b_headerのdivに追加する方法があります。これはexampleを参照してください。

Answer 2

ですが、その結果、 b_contentの上に3つのdiv（クラスがheader_leftの場合）が表示されます。どうして ？

これは浮動小数点数をクリアしていないので、あなたがoverflow:hiddenプロパティを使用して、または親div コンテナの最後の子としてclear:bothプロパティでのdivを追加することによって行うことができます。

Answer 3

基本的には、フラットを使用してクリアする必要があります。divをこのcss：clear: bothで作成してください。

これはすべきことです。

フロートについてもっと見るhere