親要素の子要素の高さを自動的に継承しない

Question

私は3列のウェブサイトを設計しています。左側の列には、プロフィール写真とともに表示される特定の人の情報が必要です。私はHTMLで取り上げていますが、私は左の列のコードをうまく設計しました。 今、私は左の列に細分類を作ろうとしています。それぞれの部門は名前と口座情報を持つ人物の写真を反映しています。

#column_left{ 
    display: inline; 
    float: left; 
    margin-left: 5px; 
} 
#col1 #sub-div{ 
    width:100%; 
    margin:auto; 
    border-top:1px #333 solid; 
    border-bottom:1px #333 solid; 
} 
#col1 #sub-div #div-img { float:left; display:inline; width: 40px; height: 40px; 
    } 
#col1 #sub-div #div-info { float:left; display:inline; width:auto; height:auto; padding: 2px; } 

さて、問題はさらに2つのdiv（DIV-IMGとDIV-情報）は、サブdivの下にあるということなので、サブのdivの高さは、その子のdivの高さに応じて変更する必要があります。しかし残念ながら、子divは正しい順序で整列されますが、親divは＃sub-divのCSSコードで言及されていない限り、高さはありません。

なぜ、親は子要素の高さを継承しないのですか？ 私はどこか間違っていますか？

Answer 1

フロートをクリアする必要があります。私が何を意味するか見るためにあなたの左のdivの下に次の行を追加します

<div style="clear: both"></div> 

は山車が清算を必要とする理由の詳細については、this articleを参照してください。 The answers to this questionは、よりクリアなソリューションを提供します。