Цвет фона CSS не работает, если высота не указана или она не плавает?

Может ли кто-нибудь объяснить, почему на 3-й строке CSS в этой демонстрации JFiddle, почему идентификатор div для #form_container требует высоты, чтобы фон показывал, если в строке 14 указан float: left?

Я думал, что float не удаляет объекты из потока браузера...

<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
    <p>
        <label for="byour_name">Name:</label>
        <input type="text" name="byour_name" value="" id="byour_name">
    </p>
    <p>
        <label for="byour_email_address">Email:</label>
        <input type="text" name="byour_email_address" value="" id="byour_email_address">
    </p>
    <p>
        <label for="subject">Subject:</label>
        <input type="text" name="formsubject" value="" id="form_subject">
    </p>
    <p>Message:
        <br/>
        <textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
    </p>
    <p>
        <input id="submitBtn" type="submit" value="Send it!">
    </p>
</form>

CSS

    #form_container {
    width: 300px;
   /* height: 300px; Background works with this uncommented if the float is enabled*/
    border: 2px red solid;
    padding: 0 10px 0 10px;
    background-color: red !important;
}
#form_container form {
    color: black;
}
#form_container input, p {
    margin: 0;
    padding 0;
    float:left; /* This breaks the background */
    display:inline;
}
#form_container label {
    width: 200px;
    position:relative;
}
#submitBtn {

}
#contact input, textarea {
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
    background-color: rgb(221, 220, 219);
    font: normal normal normal 16px/1.3em'open sans', sans-serif;
    border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
    height: 150px;
    width: 200px;
}