Когда я плаваю теги div внутри другого div в HTML

Question

Когда я хочу плавать div внутри другого, проблема будет появляться.

<div id="main"> 
    <div id="anotherDiv"> 
     <h1>Test</h1> 
    </div> 
</div> 

и это мой стиль лист:

#main{ background-color:red; padding:20px; } 
#anotherDiv{ background-color:blue; } 

Это моя страница без поплавка:

Но это мой стиль лист, когда я добавляю следующий стиль:

#anotherDiv{ float:left; } 

Но я хочу что-то вроде этого:

Что я могу сделать?

Answer 1

Просто добавьте overflow:auto в #main:

#main { 
    background-color:red; 
    padding:20px; 
    overflow:auto; 
} 

jsFiddle example

восстановит bahavior родительского DIV вы стремитесь без каких-либо ненужные элементы HTML.

Answer 2

Необходимо очистить поплавок.
Здесь работает скрипку:

#main{ background-color:red; padding:20px; } 
 
#anotherDiv{ background-color:blue; } 
 
#anotherDiv{ float:left; }

<div id="main"> 
 
    <div id="anotherDiv"> 
 
     <h1>Test</h1> 
 
    </div> 
 
    <div style="clear: both;"></div> 
 
</div>

Answer 3

Вы также можете попробовать display: inline-block;.

DEMO