Родительский div не наследует высоту своего дочернего элемента автоматически

Question

Я проектирую веб-сайт из трех столбцов, и я хочу, чтобы в левом столбце информация о некоторых конкретных лицах отображалась с их фотографией профиля. Для среднего времени я беру его в 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; } 

Теперь проблема заключается в том, что даже две дивы (Div-IMG и-прадр) находятся под суб-DIV, так что высота суб-DIV должен меняться в зависимости от высоты его дочерних дивы. Но, к сожалению, дочерние divs выровнены в правильном порядке, но родительский div не имеет высоты, если не упоминать его в коде css # sub-div.

Может ли кто-нибудь сказать мне, почему родительский элемент не наследует высоту дочернего элемента? Я где-то ошибаюсь?

Answer 1

Вам нужно очистить свои поплавки. Добавьте эту строку в нижней части левой DIV, чтобы увидеть, что я имею в виду:

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

Чтобы узнать больше о том, почему поплавки нужно клиринг см this article. The answers to this question предлагает больше решений для очистки.