html - 除非指定高度或 float ，否则 CSS 背景颜色不起作用？

Question

谁能解释为什么在这个 JFiddle demo 中 CSS 的第 3 行如果在第 14 行指定了 float:left，为什么 #form_container 的 div ID 需要一个高度才能显示背景？

我认为 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;
}

Answer 1

这是你的 fiddle ，看这个

http://jsfiddle.net/jkkheni/eJS6b/3/

添加了一个 clear 的 css 类

 .clear{ clear:both; height:0px; width:0px; display:table; content:"";}

并在您的 html 中添加了一个 div

  <div class="clear"></div>

在关闭 id 为 form_container 的 div 之前

当您使用 float 时，请始终清除所有 float 。 或者您也可以在带有 form_container id

的 div 中使用 overflow:hidden